// ================================================================================ // + Subpanel // -------------------------------------------------------------------------------- $Subpanel_KeyColor: saturate(steelblue, 20%); // [ja] └ Subpanel 内のキーカラー（アイコンや文字色の一貫性を保つための共通／事前定義） $Subpanel-Icon_Size: 21px; // [ja] └ Subpanel 内アイコン寸法（正方形の１辺） $Subpanel_Margin: 4px; $Subpanel_BorderRadius: 4px; $Subpanel_BackgroundColor: rgba(252,252,252, 0.96); $Subpanel_BoxShadow: rgba(black, 0.1) 0 2px 2px; $Subpanel_TransitionTimingFunction__Open: cubic-bezier(.2,.8,.8,1.1); $Subpanel_TransitionTimingFunction__Close: ease-out; // - Sub Panel :: Scrollbar // -------------------------------------------------------------------------------- $Subpanel-Scrollbar-Track_Size: 6px; $Subpanel-Scrollbar-Track_BackgroundColor: rgb(248,248,248); $Subpanel-Scrollbar-Thumb_Size: 2px; $Subpanel-Scrollbar-Thumb_BackgroundColor: rgb(195,195,195); $Subpanel-Scrollbar-Thumb_BackgroundColor__Hover: rgb(125,125,125); $Subpanel-Scrollbar-Thumb_BackgroundColor__Active: $Subpanel-Scrollbar-Thumb_BackgroundColor__Hover; // - Sub Panel > Section // -------------------------------------------------------------------------------- $Subpanel-Section_VerticalMargin: 16px; $Subpanel-Heading_HorizontalPadding: 8px; $Subpanel-Heading_Color: rgb(64,64,64); $Subpanel-ButtonGroup_VerticalMargin: 6px; $Subpanel-ButtonGroup_BorderColor: rgba(black, 0.1); $Subpanel-Button_HorizontalPadding: 8px; $Subpanel-Button_Height: 38px; $Subpanel-Button-FontSize: 13px; $Subpanel-Button_Color: rgb(64,64,64); $Subpanel-Button-Check_Color: rgb(160,160,160); $Subpanel-Button_BorderColor: rgba(black, 0.1); $Subpanel-Button_BackgroundColor: white; $Subpanel-Button_Color__Active: $Subpanel-Button_Color; $Subpanel-Button-Check_Color__Active: $Subpanel_KeyColor; $Subpanel-Button_BorderColor__Active: $Subpanel-Button_BorderColor; $Subpanel-Button_BackgroundColor__Active: $Subpanel-Button_BackgroundColor; $Subpanel-Button_Color__Hover: $Subpanel_KeyColor; $Subpanel-Button-Check_Color__Hover: rgba($Subpanel_KeyColor, 0.8); $Subpanel-Button_BorderColor__Hover: rgba($Subpanel_KeyColor, 0.1); $Subpanel-Button_BackgroundColor__Hover: rgba(244,248,252, 0.8); $Subpanel-Icon_MarginRight: 6px; // - Sub Panel: Bookmarks // -------------------------------------------------------------------------------- $BookmarkSubpanel-Button_BackgroundColor__Hot: rgba(gold, .125); @mixin BookmarkSubpanel-Button-Label() { .bibi-bookmark-page { .bibi-bookmark-unit { font-size: .9em; } .bibi-bookmark-number { font-size: 1.1em; margin-left: .125em; } } .bibi-bookmark-total-pages { font-size: .8em; margin-left: .25em; opacity: .75; .bibi-bookmark-number { margin-left: .125em; } } .bibi-bookmark-percent { .bibi-bookmark-parenthesis { } .bibi-bookmark-number { } .bibi-bookmark-unit { font-size: .8em; } } .bibi-bookmark-total-pages + .bibi-bookmark-percent { font-size: .9em; margin-left: .125em; opacity: .75; .bibi-bookmark-parenthesis { } .bibi-bookmark-number { } .bibi-bookmark-unit { } } .bibi-bookmark-is-current { box-sizing: border-box; display: block; position: absolute; top: 0; right: $Subpanel-Button_Height; bottom: 0; left: 0; width: auto; height: $Subpanel-Button_Height; &:before { $LOCAL__Height: $Subpanel-Icon_Size * .9; content: " Current Page"; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: auto; margin: auto; border-radius: $LOCAL__Height * 0.5; padding: 0 .75em; width: auto; height: $LOCAL__Height; line-height: $LOCAL__Height; font-size: .8em; font-weight: bold; color: $Subpanel_KeyColor; background: rgba($Subpanel_KeyColor, .125); } &.bibi-bookmark-is-current-ja:before { content: " 現在のページ"; } } } @mixin BookmarkSubpanel-Button-RemoveBookmark-Icon() { @include GLOBAL__FontIcon_BaseStyles("Material Icons", $Subpanel-Icon_Size); content: "cancel"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: $Subpanel-Icon_Size; height: $Subpanel-Icon_Size; color: rgba($Subpanel-Button_Color, .75); opacity: 1; } @mixin BookmarkSubpanel-Button-RemoveBookmark-Icon__Hover() { color: rgba(255,64,0, .875); opacity: 1; } @mixin BookmarkSubpanel-Button-RemoveBookmark-Icon__HoverOnBookmark() { opacity: .25; } // ================================================================================ // + Icons in Subpanel // -------------------------------------------------------------------------------- // - Colors & Interaction // -------------------------------------------------------------------------------- // [In Subpanel] Default $Subpanel-Icon-Font_PaintColor: rgb(128,128,128); $Subpanel-Icon-Font_OutlineColor: transparent; $Subpanel-Icon-Shape_PaintColor: white; $Subpanel-Icon-Shape_OutlineColor: rgb(144,144,144); $Subpanel-Icon_BackgroundColor: rgb(248,248,248); $Subpanel-Icon_BorderColor: rgb(192,192,192); $Subpanel-Icon_Transform: none; // [In Subpanel] Default:Hover $Subpanel-Icon-Font_PaintColor__Hover: $Subpanel_KeyColor; $Subpanel-Icon-Font_OutlineColor__Hover: transparent; $Subpanel-Icon-Shape_PaintColor__Hover: white; $Subpanel-Icon-Shape_OutlineColor__Hover: $Subpanel_KeyColor; $Subpanel-Icon_BackgroundColor__Hover: lighten($Subpanel_KeyColor, 45%); $Subpanel-Icon_BorderColor__Hover: $Subpanel_KeyColor; $Subpanel-Icon_Transform__Hover: $Subpanel-Icon_Transform; // [In Subpanel] Active $Subpanel-Icon-Font_PaintColor__Active: white; $Subpanel-Icon-Font_OutlineColor__Active: transparent; $Subpanel-Icon-Shape_PaintColor__Active: white; $Subpanel-Icon-Shape_OutlineColor__Active: $Subpanel_KeyColor; $Subpanel-Icon_BackgroundColor__Active: $Subpanel_KeyColor; $Subpanel-Icon_BorderColor__Active: $Subpanel_KeyColor; $Subpanel-Icon_Transform__Active: rotate(360deg); // [In Subpanel] Active:Hover $Subpanel-Icon-Font_PaintColor__Active-Hover: white; $Subpanel-Icon-Font_OutlineColor__Active-Hover: transparent; $Subpanel-Icon-Shape_PaintColor__Active-Hover: white; $Subpanel-Icon-Shape_OutlineColor__Active-Hover: $Subpanel_KeyColor; $Subpanel-Icon_BackgroundColor__Active-Hover: lighten($Subpanel_KeyColor, 20%); $Subpanel-Icon_BorderColor__Active-Hover: $Subpanel_KeyColor; $Subpanel-Icon_Transform__Active-Hover: $Subpanel-Icon_Transform__Active; // [In Subpanel] Transition $Subpanel-Icon_Transition: color 0.125s linear, background-color 0.125s linear, border-color 0.125s linear, text-shadow 0.125s linear, box-shadow 0.125s linear, transform 0.25s ease ; // Disabled $Subpanel-Icon_Opacity__Disabled: 0.33; /*

{ Heading Text }

*/