CSSクラス

このセクションでは、「どこでもView」のスタイルを変更するCSSのインターフェースについて詳述しています。ここでは、対応するコンポーネントごとにElementおよびModifierを記述しています。

CSSクラスの具体的な利用例はビューのスタイルを変更するを参照してください。

gcss-fullscreen-bar

フルスクリーンバーに関する情報を表します。

Element Modifier
gcss-fullscreen-bar__link
gcss-fullscreen-bar__home-img
gcss-fullscreen-bar__photo
gcss-fullscreen-bar__photo-img
gcss-fullscreen-bar__user-name

gcss-fullscreen-split

フルスクリーンバーの境界のシンボルに関する情報を表します。

Element Modifier
gcss-fullscreen-split__symbol

gcss-titlebar

タイトルバーに関する情報を表します。

Element Modifier
gcss-titlebar__object-btn
gcss-titlebar__logo
gcss-titlebar__current-table-icon
gcss-titlebar__current-table-text
gcss-titlebar__btn gcss-titlebar__btn_checked
gcss-titlebar__img
gcss-titlebar__text
gcss-titlebar__view-info-btn
gcss-titlebar__design-btn
gcss-titlebar__manage-btn
gcss-titlebar__help-btn
gcss-titlebar__settings-btn
gcss-titlebar__fullscreen-on
gcss-titlebar__fullscreen-off

gcss-view-dropdown

ビューの切り替えドロップダウンに関する情報を表します。

Element Modifier
gcss-view-dropdown__btn
gcss-view-dropdown__btn-text
gcss-view-dropdown__search-box
gcss-view-dropdown__list

gcss-view-modified-dropdown

共有ビューを変更したときに表示されるドロップダウンに関する情報を表します。

Element Modifier
gcss-view-modified-dropdown__btn
gcss-view-modified-dropdown__list

gcss-view-info-popup

ビュー情報のポップアップに関する情報を表します。

Element Modifier
gcss-view-info-popup__table-title
gcss-view-info-popup__view-name
gcss-view-info-popup__view-description
gcss-view-info-popup__view-id
gcss-view-info-popup__last-modified
gcss-view-info-popup__edit-btn
gcss-view-info-popup__owner
gcss-view-info-popup__share-info
gcss-view-info-popup__communities
gcss-view-info-popup__visibility
gcss-view-info-popup__change-owner-btn
gcss-view-info-popup__change-share-btn

gcss-help-popup

ヘルプのポップアップに関する情報を表します。

Element Modifier
gcss-help-popup__btn
gcss-help-popup__config-link
gcss-help-popup__help-start-link
gcss-help-popup__help-dev-link
gcss-help-popup__help-community-link
gcss-help-popup__release-link
gcss-help-popup__contact-link

gcss-settings-popup

設定のポップアップに関する情報を表します。

Element Modifier
gcss-settings-popup__img
gcss-settings-popup__zoom-out
gcss-settings-popup__zoom-100
gcss-settings-popup__zoom-in
gcss-settings-popup__page-size

gcss-load-warning-msg

サポートしていないブラウザでRaySheetを表示したときに表示する警告メッセージに関する情報を表します。

ElementおよびModifierはありません。

gcss-object-pane

オブジェクトのパネルに関する情報を表します。

Element Modifier
gcss-object-pane__favourite
gcss-object-pane__all
gcss-object-pane__title
gcss-object-pane__btn_collapse
gcss-object-pane__btn_close
gcss-object-pane__all-btn
gcss-object-pane__search-box
gcss-object-pane__section [data-section="standard"]
[data-section="custom"]
[data-section="advanced"]
gcss-object-pane__fold-btn
gcss-object-pane__fold-title

gcss-favorite-list

お気に入りのリストに関する情報を表します。

Element Modifier
gcss-favorite-list__item
gcss-favorite-list__item-text
gcss-favorite-list__dropdown-btn
gcss-favorite-list__dropdown-list

gcss-object-list

すべてのオブジェクトのリストに関する情報を表します。

Element Modifier
gcss-object-list__item gcss-object-list__item_favorite
gcss-object-list__item-text
gcss-object-list__btn-img
gcss-object-list__btn

gcss-master-table

オブジェクトのテーブルに関する情報を表します。

ElementおよびModifierはありません。

gcss-detail-table

関連オブジェクトに関する情報を表します。

ElementおよびModifierはありません。

gcss-edit-view-dialog

「ビュー情報を編集」ダイアログに関する情報を表します。

Element Modifier
gcss-edit-view-dialog__name-label
gcss-edit-view-dialog__name-input
gcss-edit-view-dialog__description-label
gcss-edit-view-dialog__description-input

gcss-edit-share-dialog

「共有状態の編集」ダイアログに関する情報を表します。

Element Modifier
gcss-edit-share-dialog__spinner gcss-edit-share-dialog_not-editable
gcss-edit-share-dialog__toolbar
gcss-edit-share-dialog__add-btn
gcss-edit-share-dialog__public-btn
gcss-edit-share-dialog__clear-btn
gcss-edit-share-dialog__form-ele

gcss-view-share-list

「共有状態の編集」ダイアログのリストに関する情報を表します。

Element Modifier
gcss-view-share-list__name
gcss-view-share-list__access-level
gcss-view-share-list__remove-btn

gcss-view-change-owner-dialog

「所有者の変更」ダイアログに関する情報を表します。

Element Modifier
gcss-view-change-owner-dialog__owner-combox
gcss-view-change-owner-dialog__edit-share-link

関連オブジェクトのバーに関する情報を表します。

Element Modifier
gcss-related-bar__title gcss-related-bar_vertical
gcss-related-bar__detail-tabs
gcss-related-bar__item
gcss-related-bar__item-name
gcss-related-bar__item-space
gcss-related-bar__item-suffix
gcss-related-bar__operation-button_collapse
gcss-related-bar__operation-button_expand
gcss-related-bar__dock-button_right
gcss-related-bar__dock-button_bottom

gcss-table

RaySheetのテーブルに関する情報を表します。

gcss-toolbar

ツールバーに関する情報を表します。

Element Modifier
gcss-toolbar__item
gcss-toolbar__btn gcss-toolbar__btn_active
gcss-toolbar__btn-dropdown
gcss-toolbar__btn[name=“undo”]
gcss-toolbar__btn[name=“redo”]
gcss-toolbar__btn[name=“save”]
gcss-toolbar__btn[name=“refresh”]
gcss-toolbar__btn[name=“add”]
gcss-toolbar__btn[name=“addMore”]
[name=“add”][dropdownname=“addMore”]
[name=“addpage”][dropdownname=“addMore”]
gcss-toolbar__btn[name=“search”]
gcss-toolbar__btn[name=“actionDropDown”]
[name=“delete”][name=“actionDropDown”]
[name=“clone”][name=“actionDropDown”]
[name=“pin”][name=“actionDropDown”]
[name=“massAddTask”][name=“actionDropDown”]
[name=“massAddNote”][name=“actionDropDown”]
[name=“actionbutton”][name=“actionDropDown”]
gcss-toolbar__btn[name=“export”]
gcss-toolbar__btn[name=“readingPane”]
gcss-toolbar__btn[name=“readingPaneLayout”]
[name=“readingPaneRight”][dropdownname=“readingPaneLayout”]
gcss-toolbar__menu
gcss-toolbar__menu-btn
gcss-toolbar__menu-container

gcss-toolbar-menu

ブラウザの横幅を小さくしたときに表示されるツールバーメニューに関する情報を表します。

gcss-context-menu

コンテキストメニューに関する情報を表します。

Element Modifier
gcss-contextMenu__ul gcss-context-menu_has-child
gcss-context-menu__separate
gcss-context-menu__icon gcss-context-menu__icon_empty
gcss-context-menu__display-text
gcss-context-menu__right-icon

gcss-formulabar

数式バーに関する情報を表します。

ElementおよびModifierはありません。

gcss-namebox

数式バーの名前項目に関する情報を表します。

Element Modifier
gcss-namebox__input
gcss-namebox__go

gcss-formulabox

数式バーのセルの値の表示ボックスに関する情報を表します。

Element Modifier
gcss-formulabox__buttons
gcss-formulabox__cancel
gcss-formulabox__enter
gcss-formulabox__input
gcss-formulabox__values
gcss-formulabox__switch

gcss-ss-placeholder

プレースフォルダーに関する情報を表します。

Element Modifier
gcss-ss-placeholder_hidden

gcss-ss-spinner

データ読み込み時のスピナーに関する情報を表します。

Element Modifier
gcss-ss-spinner_hidden

gcss-reading-pane

作業ウィンドウに関する情報を表します。

Element Modifier
gcss-reading-pane__container
gcss-readingpane__tab
gcss-readingpane__content
gcss-reading-pane__placeholder

gcss-footerbar

フッターバーに関する情報を表します。

Element Modifier
gcss-footer__container
gcss-footerbar__icon gcss-footerbar__icon_success
gcss-footerbar__icon_warning
gcss-footerbar__icon_edit
gcss-footerbar__icon_spinner
gcss-footerbar__status-text
gcss-footerbar__message gcss-footerbar__detail-link
gcss-footerbar__error-btns data-button-name="last"
data-button-name="next"
data-button-name="goto"
gcss-footerbar__summary
gcss-footerbar__items
gcss-footerbar__pager

gcss-search-dialog

検索ダイアログに関する情報を表します。

Element Modifier
gcss-search-dialog_option_hide
gcss-search-dialog__header gcss-search-dialog_replace_active
gcss-search-dialog__header-title
gcss-search-dialog__tab-header
gcss-search-dialog__header-item
gcss-search-dialog__find-label
gcss-search-dialog__find-content-input
gcss-search-dialog__replace-label
gcss-search-dialog__replace-content-input
gcss-search-dialog__match-case-checkbox gcss-searchDialog_show_result_list
gcss-search-dialog__match-case-checkbox
gcss-search-dialog__match-entire-content-checkbox
gcss-search-dialog__match-byte-checkbox
gcss-search-dialog__search-direction-select
gcss-search-dialog__option-button
gcss-search-dialog__replace-all
gcss-search-dialog__replace
gcss-search-dialog__find-next
gcss-search-dialog__close-dialog-button
gcss-search-dialog__result-list
gcss-search-dialog__status

gcss-export-dialog

エクスポートダイアログに関する情報を表します。

Element Modifier
gcss-export-dialog__type
gcss-export-dialog__current-page
gcss-export-dialog__all-page
gcss-export-dialog__rows
gcss-export-dialog__id
gcss-export-dialog__header
gcss-export-dialog__summary

gcss-base-dialog

ダイアログに関する情報を表します。ダイアログ共通のスタイルです。

Element Modifier
gcss-base-dialog__header gcss-base-dialog_active
gcss-base-dialog__title
gcss-base-dialog-btn__close gcss-base-dialog_inactive
gcss-base-dialog__footer
gcss-base-dialog__btn_ok
gcss-base-dialog__btn_cancel

gcss-column-setting-dialog

「列の設定」ダイアログに関する情報を表します。

Element Modifier
gcss-column-setting-dialog__tab [data-type="general"]
[data-type="appearance"]
[data-type="conditional"]
gcss-column-setting-dialog__general
gcss-column-setting-dialog__appearance
gcss-column-setting-dialog__summary
gcss-column-setting-dialog__conditional

gcss-col-general

「列の設定」の「一般設定」に関する情報を表します。

Element Modifier
gcss-col-general__column-label
gcss-col-general__width
gcss-col-general__auto-width
gcss-col-general__cell-type
gcss-col-general__ref-field
gcss-col-general__search-condition
gcss-col-general__search-by
gcss-col-general__hidden
gcss-col-general__lock
gcss-col-general__require

gcss-col-appearance

「列の設定」の「外観」に関する情報を表します。

Element Modifier
gcss-col-appearance__element
gcss-col-appearance__bold
gcss-col-appearance__italic
gcss-col-appearance__underline
gcss-col-appearance__strikethrough
gcss-col-appearance__h-align

gcss-col-format

「列の設定」の「条件付き書式」に関する情報を表します。

Element Modifier
gcss-col-format__btn-group
gcss-col-format__new-btn
gcss-col-format__delete-btn
gcss-col-format__condition-list-container
gcss-col-format__label
gcss-col-format__detail-content
gcss-col-format__format-style-selector
gcss-highlight__dropdown
gcss-highlight__dropdown-btn
gcss-highlight__dropdown-list
gcss-highlight__greater-than-canvas
gcss-highlight__less-than-canvas
gcss-highlight__between-canvas
gcss-highlight__highlight-equal-canvas
gcss-highlight__date-occurring
gcss-highlight__date-occurring-canvas
gcss-highlight__duplicate-values-canvas
gcss-highlight__detail
gcss-highlight__detail-element
gcss-highlight__value-type-selector
gcss-highlight__cell-value-condition
gcss-hightlight__cell-value1
gcss-hightlight__cell-value-and
gcss-hightlight__cell-value2
gcss-highlight__specific-text-container
gcss-highlight__specific-text-condition
gcss-highlight__specific-text-value
gcss-highlight__dates-occuring-condition
gcss-highlight__dates-range-type
gcss-highlight__dates-range-condition
gcss-highlight__dates-range-value
gcss-databar__dropdown
gcss-databar__dropdown-btn
gcss-databar__dropdown-list
gcss-databar__detail
gcss-databar__datail-element
gcss-databar__minimum-type
gcss-databar__maximum-type
gcss-databar__minmum-value
gcss-databar__maximum-value
gcss-databar__fill-selector
gcss-databar__fill-color
gcss-databar__border-selector
gcss-databar__border-color
gcss-topbottom__dropdown
gcss-topbottom__dropdown-btn
gcss-topbottom__dropdown-list
gcss-topbottom__top10-canvas
gcss-topbottom__bottom10-canvas
gcss-topbottom__average-above
gcss-topbottom__average-above-canvas
gcss-topbottom__detail
gcss-topbottom__detail-element
gcss-topbottom__condition
gcss-topbottom__value
gcss-colorscale__dropdown
gcss-colorscale__dropdown-btn
gcss-colorscale__dropdown-list
gcss-color-scales__detail
gcss-color-scales__detail-element
gcss-color-scales__style
gcss-color-scales__minimum-type
gcss-color-scales__minimum-color
gcss-color-scales__midpoint-type
gcss-color-scales__midpoint-value
gcss-color-scales__midpoint-color
gcss-color-scales__maximum-type
gcss-color-scales__maximum-color
gcss-duplicate__detail
gcss-duplicate__detail-element
gcss-duplicate___condition
gcss-average__detail
gcss-average__detail-element
gcss-average__condition
gcss-appearance__detail
gcss-appearance__detail-element
gcss-appearance__color
gcss-appearance__italic
gcss-appearance__underline
gcss-appearance__strikethrough
gcss-appearance__h-align
gcss-appearance__preview

gcss-numformat-dialog

「書式」ダイアログに関する情報を表します。

Element Modifier
gcss-numformat-dialog__label
gcss-numformat-dialog__category
gcss-numformat-dialog__sample
gcss-numformat-dialog__settings
gcss-numformat-dialog__comments

gcss-num-setting

「書式」ダイアログの設定項目エリアに関する情報を表します。

Element Modifier
gcss-num-setting__general
gcss-num-setting__number
gcss-num-setting__number-decimal
gcss-num-setting__number-separator
gcss-num-setting__number-list
gcss-num-setting__currency
gcss-num-setting__currency-decimal
gcss-num-setting__currency-symbol
gcss-num-setting__currency-list
gcss-num-setting__account
gcss-num-setting__account-decimal
gcss-num-setting__account-symbol
gcss-num-setting__date
gcss-num-setting__date-list
gcss-num-setting__date-locale
gcss-num-setting__date-calendar
gcss-num-setting__time
gcss-num-setting__time-list
gcss-num-setting__time-locale
gcss-num-setting__percentage
gcss-num-setting__percentage-decimal
gcss-num-setting__scientific
gcss-num-setting__scientific-decimal
gcss-num-setting__special
gcss-num-setting__special-locale
gcss-num-setting__custom
gcss-num-setting__custom-input
gcss-num-setting__custom-list
gcss-num-setting__text

gcss-number-comments

「書式」ダイアログの説明文に関する情報を表します。

Element Modifier
gcss-number-comments__number
gcss-number-comments__currency
gcss-number-comments__accounting
gcss-number-comments__date
gcss-number-comments__time
gcss-number-comments__percentage
gcss-number-comments__special
gcss-number-comments__custom

gcss-custom-filter-dialog

「ユーザー設定フィルター」ダイアログに関する情報を表します。

Element Modifier
gcss-custom-filter-dialog__condition1 gcss-custom-filter-dialog_normal
gcss-custom-filter-dialog__value1 gcss-custom-filter-dialog_specifiedDate
gcss-custom-filter-dialog__btn1 gcss-custom-filter-dialog_constDate
gcss-custom-filter-dialog__and gcss-custom-filter-dialog_constDateWithParameter
gcss-custom-filter-dialog__or
gcss-custom-filter-dialog__condition2
gcss-custom-filter-dialog__value2
gcss-custom-filter-dialog__btn2

gcss-custom-url-dialog

「カスタムページを追加」ダイアログに関する情報を表します。

Element Modifier
gcss-custom-url-dialog__label
gcss-custom-url-dialog__advance
gcss-custom-url-dialog__url
gcss-custom-url-dialog__help

gcss-url-advanced-dialog

「拡張編集ページのURL」ダイアログに関する情報を表します。

Element Modifier
gcss-url-advanced-dialog__fields
gcss-url-advanced-dialog__categories
gcss-url-advanced-dialog__functions
gcss-url-advanced-dialog__function-name
gcss-url-advanced-dialog__function-description
gcss-url-advanced-dialog__url
gcss-url-advanced-dialog__more
gcss-url-advanced-dialog__help gcss-url-advanced-dialog_warning

gcss-import-view-dialog

ビューのインポートダイアログに関する情報を表します。

Element Modifier
gcss-import-view-dialog__error-msg
gcss-import-view-dialog__error-detail-content
gcss-import-view-dialog__list
gcss-import-view-dialog__filter-by
gcss-import-view-dialog__display-fields
gcss-import-view-dialog__conditions
gcss-import-view-dialog__logic

gcss-confirm-dialog

確認ダイアログに関する情報を表します。

Element Modifier
gcss-confirm-dialog__icon
gcss-confirm-dialog__message

gcss-error-dialog

エラーダイアログに関する情報を表します。

Element Modifier
gcss-error-dialog__copy-to
gcss-error-dialog__error-msg

gcss-process-dialog

レコード処理状況ダイアログに関する情報を表します。

Element Modifier
gcss-process-dialog__tip
gcss-progress-bar
gcss-progress-dialog__number
gcss-process-dialog__progress_success
gcss-process-dialog__progress_cancel

gcss-add-query-dialog

「検索パネルの項目を追加」ダイアログに関する情報を表します。

Element Modifier
gcss-add-query-dialog__field-combo
gcss-add-query-dialog__type-combo
gcss-add-query-dialog__label-input

gcss-design-panel

デザインのパネルに関する情報を表します。

Element Modifier
gcss-design-panel__title
gcss-design-panel__master-tab
gcss-design-panel__related-tab
gcss-design-panel__related-dropdown
gcss-design-panel__related-dropdown-btn
gcss-design-panel__related-dropdown-list

gcss-current-design-panel

現在のデザインのパネルに関する情報を表します。

Element Modifier
gcss-current-design-panel__left-tabs
gcss-current-design-panel__tab-item[data-button=“Columns”]
gcss-current-design-panel__tab-item[data-button=“SortGroupFilter”]
gcss-current-design-panel__tab-item[data-button=“QueryPanel”]
gcss-current-design-panel__tab-item[data-button=“ReadingPane”]
gcss-current-design-panel__tab-item[data-button=“Advanced]
gcss-current-design-panel__tab-icon
gcss-current-design-panel__tab-tooltip

gcss-formula-dialog

「数式列を追加」ダイアログに関する情報を表します。

Element Modifier
gcss-formula-dialog__label-input
gcss-formula-editor__more
gcss-formula-editor__input

gcss-advanced-formula-dialog

「拡張された数式エディタ」ダイアログに関する情報を表します。

Element Modifier
gcss-advanced-formula-dialog__field-mode
gcss-advanced-formula-dialog__column-mode
gcss-advanced-formula-dialog__function-categories
gcss-advanced-formula-dialog__function-list
gcss-advanced-formula-dialog__function-description
gcss-advanced-formula-dialog__function-name

gcss-view-manager-panel

ビューの管理パネルに関する情報を表します。

Element Modifier
gcss-view-manager-panel__close-btn
gcss-view-manager-panel__spinner
gcss-view-manager__add-view-btn
gcss-view-manager__import-view-btn
gcss-view-manager__searchbox

gcss-view-list

ビューの一覧に関する情報を表します。

Element Modifier
gcss-view-list__fold-btn
gcss-view-list__fold-text
gcss-view-list__item-name
gcss-view-list__item-description
gcss-view-list__item-share
gcss-view-list__item-hidden
gcss-view-list__item-owner
gcss-view-list__item-action-btn
gcss-view-list__item-action-list
[data-action=“viewManager-toolbar-edit”]
[data-action=“viewManager-toolbar-changeOwner”]
[data-action=“viewManager-toolbar-editShare”]
[data-action=“viewManager-toolbar-design”]
[data-action=“viewManager-toolbar-saveas”]
[data-action=“viewManager-toolbar-delete”]

gcss-calendar-picker

日付セル、時間セルに関する情報を表します。

Element Modifier
gcss-calendar-picker__ok-btn-container gcss-calendar-picker_has-focus
gcss-calendar-picker__ok-btn gcss-calendar-picker_for-date
gcss-calendar-picker_for-time
gcss-calendar-picker_for-datetime

gcss-date-picker

カレンダーピッカーに関する情報を表します。

Element Modifier
gcss-date-picker__day
gcss-date-picker__right-arrow
gcss-date-picker__month-text
gcss-year-select__container
gcss-year-select__content

gcss-time-picker

時間ピッカーに関する情報を表します。

Element Modifier
gcss-time-picker__list
gcss-time-picker__time-item
gcss-time-picker__time-item_selected
Copyright © 2019 GrapeCity inc. All rights reserved.