This is a custom CSS for X with an original design. Since I am primarily a ROM (Read-Only Member), features that I don't use have not been fully developed.
x.com by jumpeinitta
Details
Authorjumpeinitta
LicenseNo License
Categoryx
Created
Updated
Size110 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name x.com
@namespace github.com/openstyles/stylus
@version 1.0.8
@description This is a custom CSS for X with an original design. Since I am primarily a ROM (Read-Only Member), features that I don't use have not been fully developed.
@author Jumpei Nitta
==/UserStyle== */
@-moz-document domain("x.com") {
/********************************************************************************************/
/* 共通設定 */
/********************************************************************************************/
/* フォント設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
font-family:"Roboto","Noto Sans JP" !important;
font-style: normal !important;
letter-spacing:0.0em !important;
font-size: large !important;
line-height: 4.0ex !important;
}
/* bodyタグ共通設定 */
body{
margin:0px;
padding:0px;
background:linear-gradient(to bottom, #101010, #000000);
background-repeat:no-repeat;
background-attachment: fixed;
}
/***********************************************/
/* リンク共通設定 */
/***********************************************/
/* aタグ */
a,a span/*,
a svg,
button svg*/{
color:#ff5000 !important;
}
/* フォーカスリンク */
.r-b88u0q span{
font-weight:700;
color:#ffffff !important;
}
/* 非フォーカスリンク */
.r-majxgm span{
font-weight:500;
color:#909090 !important;
}
/* 通知件数表示アイコン */
#react-root > div > div > div.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz > header > div > div > div > div.css-175oi2r.r-1habvwh > div.css-175oi2r.r-15zivkp.r-1bymd8e.r-13qz1uu > nav > a > div > div.css-175oi2r > div{
background-color:#ffff00 !important;
border-style:none;
}
#react-root > div > div > div.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz > header > div > div > div > div.css-175oi2r.r-1habvwh > div.css-175oi2r.r-15zivkp.r-1bymd8e.r-13qz1uu > nav > a > div > div.css-175oi2r > div span{
font-size:small !important;
color:#ff5000 !important;
font-weight:800;
}
/* ボーダー色の黒を削除 */
.r-1xc7w19{
border-style:none;
}
/***********************************************/
/* 青文字対策 */
/***********************************************/
/* 青文字を設定するクラス */
.r-1cvl2hr{
color:#ff5000 !important;
}
/* リンク文字列に、style要素で青字をオンコーディングしている場合に色を変える */
div[style*="color: rgb(29, 155, 240);"] span,
div[style*="color: rgb(29, 155, 240);"] svg,
span[style*="color: rgb(29, 155, 240);"] span{
color:#ff5000 !important;
}
/* リンク文字列に、style要素でグレー文字をオンコーディングしている場合に色を変える（日付） */
div[style*="color: rgb(113, 118, 123);"] span,
a[style*="color: rgb(113, 118, 123);"] time{
color:rgb(113, 118, 123) !important;
}
/* リンク文字列に、style要素で白文字をオンコーディングしている場合に色を変える */
div[style*="color: rgb(231, 233, 234);"] span{
color:rgb(231, 233, 234) !important;
}
/* SVGに、style要素で青字をオンコーディングしている場合に色を変える */
svg[style*="color: rgb(29, 155, 240)"]{
color:#ff5000 !important;
}
/* リンク文字列に、style要素で白文字をオンコーディングしている場合に色を変える（日付） */
div[style*="color: rgb(255, 255, 255);"] span{
color:rgb(255, 255, 255) !important;
}
/* 青背景を指定している場合に色を変える */
div[style*="background-color: rgb(29, 155, 240);"]{
background-color: #ff5000 !important;
}
/***********************************************/
/* 絵文字の縦位置ズレ対策 */
/***********************************************/
img[src*="emoji"]{
position:relative;
top:-4px;
margin-left:5px;
margin-right:5px;
}
/***********************************************/
/* ボタンの変更 */
/***********************************************/
a[style*="border-color: rgb(83, 100, 113)"],
a[style*="border-color: rgba(0, 0, 0, 0)"],
button[style*="border-color: rgb(83, 100, 113)"],
button[style*="border-color: rgba(0, 0, 0, 0)"],
div[style*="border-color: rgb(29, 155, 240)"],
div[style*="border-color: rgb(83, 100, 113)"]{
border-style:none;
background-color:#808080 !important;
}
a[style*="border-color: rgb(83, 100, 113)"] span,
a[style*="border-color: rgb(83, 100, 113)"] svg,
a[style*="border-color: rgba(0, 0, 0, 0)"] span,
a[style*="border-color: rgba(0, 0, 0, 0)"] svg,
button[style*="border-color: rgb(83, 100, 113)"] span,
button[style*="border-color: rgb(83, 100, 113)"] svg,
button[style*="border-color: rgba(0, 0, 0, 0)"] span,
button[style*="border-color: rgba(0, 0, 0, 0)"] svg,
div[style*="border-color: rgb(29, 155, 240)"] span,
div[style*="border-color: rgb(29, 155, 240)"] svg,
div[style*="border-color: rgb(83, 100, 113)"] span,
div[style*="border-color: rgb(83, 100, 113)"] svg{
color:#101010 !important;
}
a[style*="border-color: rgb(83, 100, 113)"]:hover,
a[style*="border-color: rgba(0, 0, 0, 0)"]:hover,
button[style*="border-color: rgb(83, 100, 113)"]:hover,
button[style*="border-color: rgba(0, 0, 0, 0)"]:hover,
button[style*="border-color: rgb(103, 7, 15)"]:hover,
div[style*="border-color: rgb(29, 155, 240)"]:hover,
div[style*="border-color: rgb(83, 100, 113)"]:hover{
border-style:none;
background-color:#ff5000 !important;
}
a[style*="border-color: rgb(83, 100, 113)"]:hover span,
a[style*="border-color: rgb(83, 100, 113)"]:hover svg,
a[style*="border-color: rgba(0, 0, 0, 0)"]:hover span,
a[style*="border-color: rgba(0, 0, 0, 0)"]:hover svg,
button[style*="border-color: rgb(83, 100, 113)"]:hover span,
button[style*="border-color: rgb(83, 100, 113)"]:hover svg,
button[style*="border-color: rgba(0, 0, 0, 0)"]:hover span,
button[style*="border-color: rgba(0, 0, 0, 0)"]:hover svg,
button[style*="border-color: rgb(103, 7, 15)"]:hover span,
button[style*="border-color: rgb(103, 7, 15)"]:hover svg,
div[style*="border-color: rgb(29, 155, 240)"]:hover span,
div[style*="border-color: rgb(29, 155, 240)"]:hover svg,
div[style*="border-color: rgb(83, 100, 113)"]:hover span,
div[style*="border-color: rgb(83, 100, 113)"]:hover svg{
color:#ffffff !important;
}
/***********************************************/
/* ツールチップ */
/***********************************************/
div[role="tooltip"]{
background-color:#f0f0f0;
border-radius:20px;
padding:0px 10px;
}
div[role="tooltip"] span{
font-weight:800 !important;
color:#101010 !important;
}
/***********************************************/
/* トップページ右下のメッセージ */
/***********************************************/
/* アイコンのマージン設定 */
#layers > div > div:nth-child(1) > div > div > div > div > div > div > div > div > div > div.css-175oi2r.r-1pz39u2.r-1777fci.r-15ysp7h.r-obd0qt.r-s8bhmr > div > button,
#layers > div > div:nth-child(1) > div > div > div > div > div > div > div.css-175oi2r.r-gtdqiz.r-ipm5af.r-136ojw6 > div > div > div > div > div > div.css-175oi2r.r-1pz39u2.r-1777fci.r-15ysp7h.r-obd0qt.r-s8bhmr > div > button{
margin:5px 0px 5px 10px;
}
/* アカウント名の縦位置調整 */
#layers > div > div:nth-child(1) > div > div > div > div > div > div > div.css-175oi2r.r-kemksi.r-16y2uox.r-f8sm7e.r-13qz1uu.r-1ye8kvj > section > div > div > div > div > div > div > div > div.css-175oi2r.r-1iusvr4.r-16y2uox > div > div.css-175oi2r.r-13awgt0 > div{
position:relative;
top:3px;
}
/* アカウント名の文字サイズ調整 */
#layers > div > div:nth-child(1) > div > div > div > div > div > div > div.css-175oi2r.r-kemksi.r-16y2uox.r-f8sm7e.r-13qz1uu.r-1ye8kvj > section > div > div > div > div > div > div > div > div.css-175oi2r.r-1iusvr4.r-16y2uox > div > div.css-175oi2r.r-13awgt0 > div *{
font-size:medium !important;
}
#layers > div > div:nth-child(1) > div > div > div > div > div div.r-1h3ijdo{
background:none !important;
background-color:transparent !important;
height:80px !important;
}
/********************************************************************************************/
/* 左カラム */
/********************************************************************************************/
header *{
letter-spacing:0.05em !important;
line-height: 2.5ex !important;
}
header{
position:relative;
margin:0px;
}
#react-root > div > div > div.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz > header > div{
margin:0px;
}
/* 左カラム全体背景 */
#react-root > div > div > div.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz > header > div > div > div{
height:100%;
padding:20px 20px;
margin:0px;
background:linear-gradient(to bottom, #ff5000 800px, #000000);
width:355px;
}
#react-root > div > div > div.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz > header > div > div > div > div.css-175oi2r.r-1habvwh > div.css-175oi2r.r-15zivkp.r-1bymd8e.r-13qz1uu > nav{
margin:20px 0px;
}/* 「X」タイトル部 */
#react-root > div > div > div.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz > header > div > div > div > div.css-175oi2r.r-1habvwh > div.css-175oi2r.r-dnmrzs.r-1559e4e > h1 > a > div > svg{
padding:0px;
margin:0px;
height:100px;
width:100px;
c...