|
|
| 第1行： |
第1行： |
| .tab .TabLabelText { | | .button { |
| padding: 1px;
| | font-size:1em; |
| background: #fff;
| |
| cursor: pointer;
| |
| flex: none;
| |
| } | | } |
|
| | .button.hover { |
| .tab .TabLabel {
| | font-size:1.1em; |
| z-index: 2;
| |
| position: relative;
| |
| -webkit-user-select: none;
| |
| -moz-user-select: none;
| |
| -ms-user-select: none;
| |
| user-select: none;
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| .tab .TabLabelText.selected {
| |
| padding: 1px;
| |
| background: white;
| |
| }
| |
|
| |
| .tab .TabContent { | |
| background: white;
| |
| padding: 20px 30px;
| |
| position: relative;
| |
| z-index: 1;
| |
| border: 1px solid #aaa;
| |
| }
| |
|
| |
| .tab .TabContentText {
| |
| display: none;
| |
| }
| |
|
| |
| .tab .TabContentText.selected { | |
| display: block;
| |
| }
| |
|
| |
| .tab .tabLabelTop .TabLabelText {
| |
| border-top: 3px solid transparent;
| |
| border-left: 1px solid transparent;
| |
| border-right: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelTop .TabLabelText.selected {
| |
| border-top: 3px solid green;
| |
| border-left: 1px solid #aaa;
| |
| border-right: 1px solid #aaa;
| |
| }
| |
|
| |
| .tab .tabLabelTop.reverse .TabLabelText {
| |
| border-bottom: 3px solid transparent;
| |
| border-left: 1px solid transparent;
| |
| border-right: 1px solid transparent;
| |
| border-top: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelTop.reverse .TabLabelText.selected {
| |
| border-bottom: 3px solid green;
| |
| border-left: 1px solid #aaa;
| |
| border-right: 1px solid #aaa;
| |
| border-top: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelBottom .TabLabelText {
| |
| border-bottom: 3px solid transparent;
| |
| border-left: 1px solid transparent;
| |
| border-right: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelBottom .TabLabelText.selected {
| |
| border-bottom: 3px solid green;
| |
| border-left: 1px solid #aaa;
| |
| border-right: 1px solid #aaa;
| |
| }
| |
|
| |
| .tab .tabLabelBottom.reverse .TabLabelText {
| |
| border-top: 3px solid transparent;
| |
| border-left: 1px solid transparent;
| |
| border-right: 1px solid transparent;
| |
| border-bottom: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelBottom.reverse .TabLabelText.selected {
| |
| border-top: 3px solid green;
| |
| border-left: 1px solid #aaa;
| |
| border-right: 1px solid #aaa;
| |
| border-bottom: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelLeft .TabLabelText {
| |
| border-left: 3px solid transparent;
| |
| border-top: 1px solid transparent;
| |
| border-bottom: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelLeft .TabLabelText.selected {
| |
| border-left: 3px solid green;
| |
| border-top: 1px solid #aaa;
| |
| border-bottom: 1px solid #aaa;
| |
| }
| |
|
| |
| .tab .tabLabelLeft.reverse .TabLabelText {
| |
| border-right: 3px solid transparent;
| |
| border-top: 1px solid transparent;
| |
| border-bottom: 1px solid transparent;
| |
| border-left: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelLeft.reverse .TabLabelText.selected {
| |
| border-right: 3px solid green;
| |
| border-top: 1px solid #aaa;
| |
| border-bottom: 1px solid #aaa;
| |
| border-left: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelRight .TabLabelText {
| |
| border-right: 3px solid transparent;
| |
| border-top: 1px solid transparent;
| |
| border-bottom: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelRight .TabLabelText.selected {
| |
| border-right: 3px solid green;
| |
| border-top: 1px solid #aaa;
| |
| border-bottom: 1px solid #aaa;
| |
| }
| |
|
| |
| .tab .tabLabelRight.reverse .TabLabelText {
| |
| border-left: 3px solid transparent;
| |
| border-top: 1px solid transparent;
| |
| border-bottom: 1px solid transparent;
| |
| border-right: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .tabLabelRight.reverse .TabLabelText.selected {
| |
| border-left: 3px solid green;
| |
| border-top: 1px solid #aaa;
| |
| border-bottom: 1px solid #aaa;
| |
| border-right: 1px solid transparent;
| |
| }
| |
|
| |
| .tab .Tabs .TabDivider {
| |
| width: 100%;
| |
| order: 2;
| |
| }
| |
|
| |
| .tab .Tabs.reverse .TabDivider {
| |
| height: 2px;
| |
| }
| |
|
| |
| .tab .Tabs.tabLabelLeft .TabLabel,
| |
| .tab .Tabs.tabLabelRight .TabContent {
| |
| order: 1;
| |
| }
| |
|
| |
| .tab .Tabs.tabLabelLeft .TabContent,
| |
| .tab .Tabs.tabLabelRight .TabLabel {
| |
| order: 3;
| |
| }
| |
|
| |
| .tab .Tabs.tabLabelLeft,
| |
| .tab .Tabs.tabLabelRight {
| |
| display: flex;
| |
| flex-wrap: nowrap;
| |
| width: auto;
| |
| }
| |
|
| |
| .tab .Tabs.tabLabelLeft .TabDivider,
| |
| .tab .Tabs.tabLabelRight .TabDivider {
| |
| height: 100%;
| |
| width: 0;
| |
| }
| |
|
| |
| .tab .Tabs.tabLabelLeft.reverse .TabDivider,
| |
| .tab .Tabs.tabLabelRight.reverse .TabDivider {
| |
| width: 1px;
| |
| }
| |
|
| |
| .tab .Tabs.tabLabelLeft .TabLabel,
| |
| .tab .Tabs.tabLabelRight .TabLabel {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .tab .Tabs.tabLabelLeft:not(.AutoWidth) .TabContent,
| |
| .tab .Tabs.tabLabelRight:not(.AutoWidth) .TabContent {
| |
| flex: 1;
| |
| }
| |
|
| |
| .Tabs {
| |
| max-width: 100%;
| |
| }
| |
|
| |
| .Tabs.AutoWidth {
| |
| width: max-content;
| |
| display: flow-root;
| |
| }
| |
|
| |
| .Tabs.FloatLeft {
| |
| float: left;
| |
| margin-right: 1em;
| |
| }
| |
|
| |
| .Tabs.FloatRight {
| |
| float: right;
| |
| margin-left: 1em;
| |
| }
| |
|
| |
| .Tabs .Tab {
| |
| border-bottom: 1px solid #aaa;
| |
| }
| |
|
| |
| .Tabs .Tab:first-child {
| |
| border-top: 1px solid #aaa;
| |
| }
| |
|
| |
| .Tabs .Tab .TabLabelText {
| |
| padding: 7px;
| |
| }
| |
|
| |
| .Tabs .Tab .TabContentText {
| |
| padding: 3px;
| |
| }
| |
|
| |
| .infotemplatebox>table td>.Tabs .TabLabel,
| |
| .infotemplatebox>table td>.Tabs .TabContent {
| |
| margin: 0 -1px;
| |
| } | | } |
