comparison: src/main/webapp/lightpit.css
src/main/webapp/lightpit.css
- changeset 217
- a5ad7cd5d000
- parent 213
- 5b55a5318a83
- child 219
- 556c03f1dd4e
equal
deleted
inserted
replaced
| 216:6357d2fd84f2 | 217:a5ad7cd5d000 |
|---|---|
| 62 font-size: 11pt; | 62 font-size: 11pt; |
| 63 background: white; | 63 background: white; |
| 64 color: #1c204e; | 64 color: #1c204e; |
| 65 margin: 0; | 65 margin: 0; |
| 66 padding: 0; | 66 padding: 0; |
| 67 height: 100vh; | |
| 67 } | 68 } |
| 68 | 69 |
| 69 body { | 70 body { |
| 70 height: 100%; | 71 height: 100%; |
| 71 margin: 0; | 72 margin: 0; |
| 81 cursor: pointer; | 82 cursor: pointer; |
| 82 color: #3060f8; | 83 color: #3060f8; |
| 83 text-decoration: none; | 84 text-decoration: none; |
| 84 } | 85 } |
| 85 | 86 |
| 87 #body-area { | |
| 88 display: grid; | |
| 89 grid-template-columns: max-content auto; | |
| 90 grid-template-rows: max-content 1fr; | |
| 91 height: 100%; | |
| 92 } | |
| 93 | |
| 86 #mainMenu { | 94 #mainMenu { |
| 87 position: fixed; | 95 grid-row: 1; |
| 88 z-index: 2; | 96 grid-column: 1 / span 2; |
| 89 width: 100%; | 97 width: 100%; |
| 90 display: flex; | 98 display: flex; |
| 91 flex-flow: row wrap; | 99 flex-flow: row wrap; |
| 92 border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25)); | 100 border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25)); |
| 93 border-image-slice: 1; | 101 border-image-slice: 1; |
| 94 border-bottom-style: solid; | 102 border-bottom-style: solid; |
| 95 border-bottom-width: thin; | 103 border-bottom-width: thin; |
| 104 font-size: 1.2rem; | |
| 105 background: #e0e0e5; | |
| 96 } | 106 } |
| 97 | 107 |
| 98 #sideMenu { | 108 #sideMenu { |
| 109 grid-row: 2; | |
| 110 grid-column: 1; | |
| 99 display: flex; | 111 display: flex; |
| 100 z-index: 1; | |
| 101 flex-flow: column; | 112 flex-flow: column; |
| 102 position: fixed; | |
| 103 height: 100%; | |
| 104 width: 40ch; /* adjust with sidebar-spacing.margin-left */ | |
| 105 padding-top: 2.25rem; | |
| 106 color: #3060f8; | 113 color: #3060f8; |
| 107 border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25)); | 114 border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25)); |
| 108 border-image-slice: 1; | 115 border-image-slice: 1; |
| 109 border-right-style: solid; | 116 border-right-style: solid; |
| 110 border-right-width: thin; | 117 border-right-width: thin; |
| 111 } | |
| 112 | |
| 113 #content-area.sidebar-spacing { | |
| 114 margin-left: 40ch; /* adjust with sideMenu.width */ | |
| 115 } | |
| 116 | |
| 117 #mainMenu { | |
| 118 font-size: 1.2rem; | |
| 119 background: #e0e0e5; | |
| 120 } | |
| 121 | |
| 122 #sideMenu { | |
| 123 background: #f7f7ff; | 118 background: #f7f7ff; |
| 124 overflow-x: scroll; | |
| 125 } | 119 } |
| 126 | 120 |
| 127 #mainMenu .menuEntry { | 121 #mainMenu .menuEntry { |
| 128 padding: .25em 1em .25em 1em; | 122 padding: .25em 1em .25em 1em; |
| 129 border-right-style: solid; | 123 border-right-style: solid; |
| 130 border-right-width: thin; | 124 border-right-width: thin; |
| 131 border-right-color: #9095a1; | 125 border-right-color: #9095a1; |
| 132 } | 126 } |
| 133 | 127 |
| 134 #sideMenu .menuEntry { | 128 #sideMenu .menuEntry { |
| 129 padding-right: 1em; | |
| 135 padding-top: .25em; | 130 padding-top: .25em; |
| 136 padding-bottom: .25em; | 131 padding-bottom: .25em; |
| 137 border-bottom-style: solid; | 132 border-bottom-style: solid; |
| 138 border-bottom-width: thin; | 133 border-bottom-width: thin; |
| 139 border-bottom-color: #d7d7df; | 134 border-bottom-color: #d7d7df; |
| 158 #sideMenu .level-2 { | 153 #sideMenu .level-2 { |
| 159 padding-left: 2em; | 154 padding-left: 2em; |
| 160 } | 155 } |
| 161 | 156 |
| 162 #content-area { | 157 #content-area { |
| 163 padding: 2.75rem 1em 1em; | 158 grid-row: 2; |
| 159 grid-column: 2; | |
| 160 padding: 1.5em; | |
| 164 } | 161 } |
| 165 | 162 |
| 166 button, a.button { | 163 button, a.button { |
| 167 display: inline-block; | 164 display: inline-block; |
| 168 font-size: medium; | 165 font-size: medium; |
