Ameblo Writer Compact by personwritep

/* ==UserStyle==
@name           Ameblo Writer Compact
@namespace   userstyles.world
@author          personwritep
@description   アメーバブログの「最新版エディタ（標準）」「新タグ編集エディタ」のアレンジ
@version        202405.24.01
@license         NO-REDISTRIBUTION
@preprocessor    stylus
@var checkbox wide_mode '横幅が拡張するデザイン' 0
@var checkbox compact_palette 'コンパクト右パレット' 1
@var checkbox large_thumbnail '拡大サムネイル' 1
@var checkbox large_cover_dialogue 'カバー設定ダイアログの拡大' 1
@var select preset_color "プリセット配色" {
    "ブルーグレイ　": "bluegray",
    "ダークグリーン": "dark_green",
    "グランブルー　": "grand_blue",
    "ブラウンウッド": "wooden",
    "❖ユーザー設定": "custom" }
@var color win_back_c '　　❖ユーザー設定：全体の背景色' #a2c0ce
@var color editor_c '　　❖ユーザー設定：編集枠・右パレット' #c6d6dd
@var select preset_border_color "プリセット枠線色" {
    "ライトグレイ　": "b_l_gray",
    "グリーン　　　": "b_l_green",
    "ダークグレイ　": "b_d_gray" }
@var select parts_mode "各種パーツの明背景・暗背景" {
    "明背景モード　": "light_mode_parts",
    "暗背景モード　": "dark_mode_parts" }
@var checkbox tag_editor 'タグ編集エディタ 拡張設定' 0
@var checkbox balloon_help 'バルーンヘルプの非表示' 1
@var checkbox hash_balloon_help 'ハッシュタグ設定画面のカウント表示' 1
@var checkbox font_size 'HTML表示のフォントサイズ：　14px◀▶16px' 1
@var checkbox scroll_bar 'スクロールバーのアレンジ' 1
@var select emoji_adjustment "アメブロ絵文字の位置補正　適合フォント　　" {
    "メイリオ": "mei_aj",
    "MS Pゴシック": "msp_aj",
    "補正しない": "no_aj" }
@var checkbox selection_color '選択した文字列のデザイン' 1
@var color select_t_c '　　　ユーザー設定：選択文字色' #fff
@var color select_b_c '　　　ユーザー設定：選択背景色' #2b5d75
@var checkbox selection_img_style '選択した画像・動画・絵文字の透過マスク' 1
==/UserStyle== */
@-moz-document url-prefix("https://blog.ameba.jp/ucs/entry/srventryin"),
url-prefix("https://blog.ameba.jp/ucs/entry/srventryup"),
url-prefix("https://blog.ameba.jp/ucs/entry/srventryouterpreview"),
url-prefix("https://blog.ameba.jp/ucs/entry/imagedelete") {
/* Ameblo Writer Compact ver.77 基本CSS *************************/
/* 縦スクロールバー抑止 */
html {
overflow: initial; }

/* body 幅管理 */
.l-body {
background: var(--bgc1) !important;
box-shadow: 0 0 0 100vh var(--bgc1); }

/* グローバルヘッダー *************************/
.l-body #globalHeader {
position: absolute;
height: 0;
border: none;
background: none; }

.l-body #gHeaderLeft > *:not(.l-gHeaderLeft__link) {
display: none; }

.l-body #gHeaderRight {
display: none; }

.l-gHeaderLeft__link a {
display: block;
position: absolute !important;
top: 18px !important;
right: calc(50% - 490px);
if wide_mode {
right: calc(50% - 640px); }

width: 28px;
height: 34px;
font-size: 13px !important;
color: #2d8b3c !important;
border: 1px solid var(--bdc1);
border-radius: 4px;
background: #fff;
text-decoration: none !important;
text-indent: -282px;
overflow: hidden;
box-shadow: -10px 0 1px 0 var(--bgc1);
transition: width 0.2s,
text-indent 0.2s;
if wide_mode {
transition: width 0.2s,
text-indent 0.2s; }

z-index: 8; }

if wide_mode {
@media screen and (max-width: 1320px) {
.l-gHeaderLeft__link a {
right: 20px; } }

@media screen and (max-width: 1020px) {
.l-gHeaderLeft__link a {
right: calc(100% - 1000px); } } }

.l-gHeaderLeft__link a:hover {
width: 310px;
text-indent: 0;
color: red !important;
text-decoration: none;
transition-delay: 1s;
opacity: 1; }

.l-gHeaderLeft__link span {
display: none !important; }

.l-gHeaderLeft__link a:before {
content: "（\2006⚠\2006編集内容がリセットされます\2006）\2004";
font-size: 12px;
color: #000; }

.l-gHeaderLeft__link a:after {
content: "\EA31";
font: normal 26px/21px ameba-symbols;
position: relative;
top: 7px;
left: 3px; }

/* 編集ヘッダー ******************************/
#js-header-bar {
position: absolute;
top: 18px;
right: calc(50% - 450px);
if wide_mode {
right: calc(50% - 600px); }

min-width: initial;
width: 120px;
margin: 0;
height: 34px;
line-height: 20px;
overflow: hidden;
border: 1px solid var(--bdc1);
border-radius: 4px;
box-shadow: -10px 0 1px 0 var(--bgc1);
transition: width 0.5s ease 1s;
z-index: 7; }

if wide_mode {
@media screen and (max-width: 1320px) {
#js-header-bar {
right: 60px; } }

@media screen and (max-width: 1020px) {
#js-header-bar {
right: calc(100% - 960px); } } }

#js-header-bar:hover {
width: 250px;
transition: width 0.5s ease 0s; }

#js-header-change-editor-type {
display: none; }

.p-header {
min-width: 250px; }

.p-header__tab {
position: absolute;
z-index: 1; }

.p-header__tab__item {
position: absolute;
right: 0;
width: 120px;
height: 38px;
background: #fff; }

.p-header__tab__item.is-selected {
width: 0;
font-size: 0; }

.js-tab-header {
font-weight: bold;
line-height: 18px; }

.js-tab-header:focus {
box-shadow: none !important; }

.p-header__tab__item:first-child a {
color: #2196f3; }

.p-header__tab__item__preview {
width: initial; }

.p-header__tab__item a:hover {
opacity: 1;
color: #2196f3;
background: none; }

.p-header__linkTop {
position: absolute;
top: 9px;
left: -4px; }

.p-header__linkTop__item a:hover {
color: #2196F3 !important;
text-decoration: none; }

/* 編集コンテナ メインフォーム ******************/
.l-form {
position: relative;
margin: 0 auto;
width: 980px;
padding: 16px 0;
if wide_mode {
width: auto;
padding: 16px 20px; } }

/* タイトル枠 */
.p-title {
top: 2px;
padding: 0;
margin-bottom: 6px;
outline: none !important; }

.p-title__text {
position: relative;
height: 36px;
width: 807px;
if wide_mode {
max-width: initial;
width: calc(100% - 173px); }

padding: 0.3em 1em 0.1em;
color: #000;
border-radius: 4px;
border-color: var(--bdc1); }

/* 編集部コンテナ */
.l-main {
margin-bottom: 0;
overflow: hidden; }

/* 編集枠 左パレット **************************/
.l-editor {
height: calc(100vh - 160px);
width: 664px;
if wide_mode {
width: auto; }

margin: 0 8px 8px 0;
padding: 0;
border-radius: 4px;
box-shadow: inset -1px -1px 0 0 var(--bdc1),
inset 1px -1px 0 0 var(--bdc1);
background: rgb(162, 192, 205, 0.7);
overflow: visible; }

/* 編集アイコン */
#cke_1_top {
position: relative;
z-index: 3;
padding: 0 0 1px;
margin-bottom: 0;
background: var(--bgc1);
box-shadow: 0 10px 0 0 var(--bgc1); }

#cke_1_toolbox {
display: inline-flex;
width: 747px;
background: var(--bgc1);
box-shadow: 0 3px 0 0 var(--bgc1); }

.cke_toolbar {
display: block;
height: 30px; }

.cke_toolbar_break {
display: none; }

.cke_toolgroup {
margin: 2px 5px 0 8px; }

.cke_toolbar_separator {
border: none;
margin: 0 4px;
width: 0; }

.cke_button {
background: #fff !important;
border-color: var(--bdc2) !important; }

/* 文字・段落 ダイアログ ***********************/
.cke_combo {
margin: 2px 6px 0 0; }

.cke_combo_button {
border-color: var(--bdc2) !important; }

.cke_combo_text {
font: bold 14px/22px Meiryo UI;
padding: 1px 0 2px 8px;
width: 72px;
color: #888; }

.cke_combo_open {
display: none; }

.cke_combo__fontsize {
width: 75px; }

.cke_combo__fontsize .cke_combo_inlinelabel {
text-indent: -4px; }

.cke_combo__format {
width: 70px !important; }

.cke_panel {
border-color: var(--bdc1);
background: #edf0f2;
box-shadow: 0 5px 20px 0 #00000050; }

.cke_panel_container {
font-family: inherit;
overflow: hidden;
background: #edf0f2 !important; }

.cke_panel_listItem a:hover {
background-color: #bbdefb; }

/* カラー設定ダイアログ ***********************/
.ck-p-colorPalette__separator,
.ck-p-colorGenerator__Result,
.ck-p-palette__button {
border-color: var(--bdc1); }

.ck-l-colorGenerator {
border-color: var(--bdc1);
background-color: #edf0f2;
box-shadow: 0 5px 20px 0 #00000050; }

.ck-p-colorGenerator__Result__codeAddon {
font-family: Meiryo;
left: -2px; }

#js-colorCode {
font-family: Meiryo;
border-color: var(--bdc1); }

/* closeボタン =共通= */
.ck-p-dialog__closeButton:hover {
opacity: 1;
filter: brightness(0%); }

/* リンク設定ダイアログ ***********************/
.ck-l-linkDialog {
width: 540px;
padding: 20px;
border-radius: 0;
border-color: var(--bdc1);
background: #edf0f2;
box-shadow: 0 5px 20px 0 #00000050; }

.ck-p-linkDialog__title {
margin: 0;
font: bold 18px Meiryo; }

.ck-p-linkInput__form__label {
font: bold 14px Meiryo; }

.ck-p-linkInput__form__requiredLabel {
font: normal 14px Meiryo;
padding: 1px 4px 0; }

.ck-p-linkInput__form__input {
height: 36px;
padding: 0 6px;
margin: 6px 0 0 0;
border-radius: 4px; }

/* inputのフォーカスデザイン */
.ck-p-linkInput__form__input:focus {
box-shadow: 0 0 0 1px #2196f3 !important; }

.ck-p-toggleButton__label,
.ck-p-linkInput__form__field__description {
font-family: Meiryo; }

#js-linkText,
#js-linkDialogInput {
font: normal 16px Meiryo;
border-color: var(--bdc1); }

.ck-p-dialog__okButton {
height: 30px;
width: 40%;
padding: 3px 0 1px;
font-family: Meiryo;
margin: 24px auto 0;
border-radius: 4px; }

.ck-p-dialog__closeIcon {
font-size: 16px; }

/* リンク編集ポップアップ */
.l-linkInfoBubble {
z-index: 6; }

/* 画像配置ダイアログ *************************/
#js-ck-imgBalloon {
border-color: var(--bdc1);
background: #edf0f2;
box-shadow: 0 5px 20px 0 #00000050; }

#js-imageeditWidth,
#js-imageeditHeight,
.ck-imgBalloon__imageSizeButton,
.ck-imgBalloon__imageSizeButton__item__text,
.ck-imgBalloon__justify,
.ck-imgJustify,
.ck-imgBalloon__imageAlt__text {
border-color: var(--bdc1); }

.ck-imgBalloon__imageSizeButton__item__text.is-selected {
background: #bbdefb; }

.ck-imgJustify--active {
background: #bbdefb; }

/* エラー表示 */
#js-postErrorModalInner {
border-color: var(--bdc1);
background: #edf0f2; }

/* 各種モーダル =共通= */
.c-modal__inner {
border-color: var(--bdc1); }

.c-modal__inner__button {
padding: 3px 0 1px; }

/* 編集枠 ***********************************/
#cke_1_contents {
height: calc(100vh - 239px) !important; }

.cke_contents {
padding: 4px 0;
border-color: var(--bdc1);
background: var(--bgc2);
z-index: 3; }

.cke_contents > .cke_wysiwyg_frame {
height: 100% !important; }

/* 編集枠 通常表示 iframe内 */
.cke_editable {
min-height: 100vh; }

/* 編集枠の緑枠禁止 */
.cke_editable:focus ...