Fossil SCM

Adapted SVG background from Florian for the .help-buttonlet CSS.

stephan 2020-08-30 18:43 wikiedit-wysiwyg-legacy
Commit b2ece413ba8ca073f9dc016b83ce360bcc489ac9f39d3c6a8c8ecef8e6265901
Parent 8b0d0002003f845…
3 files changed +37 -17 +1 -1 +1 -1
~ src/default.css ~ src/style.fileedit.css ~ src/style.wikiedit.css
M src/default.css
+37 -17
--- src/default.css
+++ src/default.css
@@ -1311,33 +1311,52 @@
13111311
 otherwise they must be DIVs (block elements) so that nesting of
13121312
 block-element content is legal.
13131313
 */
13141314
 .help-buttonlet {
13151315
 display: inline-block;
1316
- min-width: 1rem;
1317
- max-width: 1rem;
1318
- min-height: 1rem;
1319
- max-height: 1rem;
1320
- line-height: 1 /*important for some skins*/;
1321
- font-size: 100%;
1322
- border-radius: 0.5rem;
1323
- background-color: rgba(54, 54, 255,1);
1324
- color: rgb(255, 255, 255);
1316
+ min-width: 1em;
1317
+ max-width: 1em;
1318
+ min-height: 1em;
1319
+ max-height: 1em;
13251320
 cursor: pointer;
1326
- font-family: monspace;
1327
- text-align: center;
13281321
 margin: 0 0 0 0.35em;
1329
- border-width: 1px;
1322
+ background-image: /* white question mark on blue circular background */
1323
+ url("data:image/svg+xml;charset=UTF-8, \
1324
+%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.867574 15.867574'%3e\
1325
+%3ccircle style='fill:%23f0f0f0;stroke-width:1.0' r='7.9337869' cy='7.9337869' \
1326
+cx='7.9337869'/%3e%3ccircle style='fill:%23404040;stroke-width:1.0' r='6.9662519' \
1327
+cy='7.9337869' cx='7.9337869'/%3e%3ccircle style='fill:%235080d0;stroke-width:1.0' r='5.9987168' \
1328
+cy='7.9337869' cx='7.9337869'/%3e%3cpath style='fill:%23f8f8f8' d='M 8.5299783,9.3087873 \
1329
+H 6.5910134 V 9.0456038 q 0,-0.4404297 0.1772461,-0.7788086 0.1772461,-0.34375 \
1330
+0.7465821,-0.8701172 l 0.34375,-0.3115235 Q 8.1647439,6.8058577 8.3043923,6.5587873 \
1331
+8.4494119,6.311717 8.4494119,6.0646467 q 0,-0.3759765 -0.2578125,-0.5854492 \
1332
+-0.2578125,-0.2148437 -0.7197266,-0.2148437 -0.4350586,0 -0.9399414,0.1826171 \
1333
+Q 6.0270486,5.624217 5.479197,5.9787092 V 4.2921858 Q 6.1290994,4.0665998 \
1334
+6.6662087,3.959178 7.2033181,3.8517561 7.7028298,3.8517561 q 1.3105469,0 \
1335
+1.9980469,0.5371094 0.6875003,0.5317383 0.6875003,1.5576172 0,0.5263671 \
1336
+-0.209473,0.9453125 -0.2094726,0.4135742 -0.7143554,0.8916015 l -0.34375,0.3061524 \
1337
+Q 8.7555642,8.4225569 8.6427712,8.6266584 8.5299783,8.8253889 8.5299783,9.0670881 \
1338
+Z M 6.5910134,10.103709 h 1.9389649 v 1.91211 H 6.5910134 Z' /%3e%3c/svg%3e ");
1339
+ background-repeat: no-repeat;
1340
+ background-position: center;
1341
+ /* When not using a background image, this works reasonably
1342
+ well along with a ::before content of "?": */
1343
+ /*border-width: 1px;
13301344
 border-style: outset;
1345
+ border-radius: 0.5em;
1346
+ font-size: 100%;
1347
+ font-family: monspace;
13311348
 font-weight: 700;
13321349
 overflow: hidden;
1333
-}
1334
-
1335
-.help-buttonlet::before {
1336
- content: "?";
1350
+ background-color: rgba(54, 54, 255,1);
1351
+ color: rgb(255, 255, 255);
1352
+ text-align: center;
1353
+ line-height: 1; */
13371354
 }
1338
-
1355
+/*.help-buttonlet::before {
1356
+ content: "?";
1357
+}*/
13391358
 /**
13401359
 We really want to hide all help text via CSS but CSS cannot select
13411360
 TEXT nodes. Thus we move them out of the way programmatically
13421361
 during initialization.
13431362
 */
@@ -1351,6 +1370,7 @@
13511370
 */
13521371
 .fossil-tooltip.help-buttonlet-content {
13531372
 cursor: default;
13541373
 text-align: left;
13551374
 border-style: outset;
1375
+ background-color: inherit;
13561376
 }
13571377
--- src/default.css
+++ src/default.css
@@ -1311,33 +1311,52 @@
1311 otherwise they must be DIVs (block elements) so that nesting of
1312 block-element content is legal.
1313 */
1314 .help-buttonlet {
1315 display: inline-block;
1316 min-width: 1rem;
1317 max-width: 1rem;
1318 min-height: 1rem;
1319 max-height: 1rem;
1320 line-height: 1 /*important for some skins*/;
1321 font-size: 100%;
1322 border-radius: 0.5rem;
1323 background-color: rgba(54, 54, 255,1);
1324 color: rgb(255, 255, 255);
1325 cursor: pointer;
1326 font-family: monspace;
1327 text-align: center;
1328 margin: 0 0 0 0.35em;
1329 border-width: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1330 border-style: outset;
 
 
 
1331 font-weight: 700;
1332 overflow: hidden;
1333 }
1334
1335 .help-buttonlet::before {
1336 content: "?";
1337 }
1338
 
 
1339 /**
1340 We really want to hide all help text via CSS but CSS cannot select
1341 TEXT nodes. Thus we move them out of the way programmatically
1342 during initialization.
1343 */
@@ -1351,6 +1370,7 @@
1351 */
1352 .fossil-tooltip.help-buttonlet-content {
1353 cursor: default;
1354 text-align: left;
1355 border-style: outset;
 
1356 }
1357
--- src/default.css
+++ src/default.css
@@ -1311,33 +1311,52 @@
1311 otherwise they must be DIVs (block elements) so that nesting of
1312 block-element content is legal.
1313 */
1314 .help-buttonlet {
1315 display: inline-block;
1316 min-width: 1em;
1317 max-width: 1em;
1318 min-height: 1em;
1319 max-height: 1em;
 
 
 
 
 
1320 cursor: pointer;
 
 
1321 margin: 0 0 0 0.35em;
1322 background-image: /* white question mark on blue circular background */
1323 url("data:image/svg+xml;charset=UTF-8, \
1324 %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.867574 15.867574'%3e\
1325 %3ccircle style='fill:%23f0f0f0;stroke-width:1.0' r='7.9337869' cy='7.9337869' \
1326 cx='7.9337869'/%3e%3ccircle style='fill:%23404040;stroke-width:1.0' r='6.9662519' \
1327 cy='7.9337869' cx='7.9337869'/%3e%3ccircle style='fill:%235080d0;stroke-width:1.0' r='5.9987168' \
1328 cy='7.9337869' cx='7.9337869'/%3e%3cpath style='fill:%23f8f8f8' d='M 8.5299783,9.3087873 \
1329 H 6.5910134 V 9.0456038 q 0,-0.4404297 0.1772461,-0.7788086 0.1772461,-0.34375 \
1330 0.7465821,-0.8701172 l 0.34375,-0.3115235 Q 8.1647439,6.8058577 8.3043923,6.5587873 \
1331 8.4494119,6.311717 8.4494119,6.0646467 q 0,-0.3759765 -0.2578125,-0.5854492 \
1332 -0.2578125,-0.2148437 -0.7197266,-0.2148437 -0.4350586,0 -0.9399414,0.1826171 \
1333 Q 6.0270486,5.624217 5.479197,5.9787092 V 4.2921858 Q 6.1290994,4.0665998 \
1334 6.6662087,3.959178 7.2033181,3.8517561 7.7028298,3.8517561 q 1.3105469,0 \
1335 1.9980469,0.5371094 0.6875003,0.5317383 0.6875003,1.5576172 0,0.5263671 \
1336 -0.209473,0.9453125 -0.2094726,0.4135742 -0.7143554,0.8916015 l -0.34375,0.3061524 \
1337 Q 8.7555642,8.4225569 8.6427712,8.6266584 8.5299783,8.8253889 8.5299783,9.0670881 \
1338 Z M 6.5910134,10.103709 h 1.9389649 v 1.91211 H 6.5910134 Z' /%3e%3c/svg%3e ");
1339 background-repeat: no-repeat;
1340 background-position: center;
1341 /* When not using a background image, this works reasonably
1342 well along with a ::before content of "?": */
1343 /*border-width: 1px;
1344 border-style: outset;
1345 border-radius: 0.5em;
1346 font-size: 100%;
1347 font-family: monspace;
1348 font-weight: 700;
1349 overflow: hidden;
1350 background-color: rgba(54, 54, 255,1);
1351 color: rgb(255, 255, 255);
1352 text-align: center;
1353 line-height: 1; */
1354 }
1355 /*.help-buttonlet::before {
1356 content: "?";
1357 }*/
1358 /**
1359 We really want to hide all help text via CSS but CSS cannot select
1360 TEXT nodes. Thus we move them out of the way programmatically
1361 during initialization.
1362 */
@@ -1351,6 +1370,7 @@
1370 */
1371 .fossil-tooltip.help-buttonlet-content {
1372 cursor: default;
1373 text-align: left;
1374 border-style: outset;
1375 background-color: inherit;
1376 }
1377
M src/style.fileedit.css
+1 -1
--- src/style.fileedit.css
+++ src/style.fileedit.css
@@ -147,11 +147,11 @@
147147
 body.fileedit #fileedit-stash-selector {
148148
 margin: 0.25em;
149149
 display: flex;
150150
 flex-direction: row;
151151
 flex-wrap: wrap;
152
- align-items: baseline;
152
+ align-items: center;
153153
 }
154154
 body.fileedit #fileedit-stash-selector select {
155155
 margin: 0 1em;
156156
 height: initial;
157157
 font-family: monospace;
158158
--- src/style.fileedit.css
+++ src/style.fileedit.css
@@ -147,11 +147,11 @@
147 body.fileedit #fileedit-stash-selector {
148 margin: 0.25em;
149 display: flex;
150 flex-direction: row;
151 flex-wrap: wrap;
152 align-items: baseline;
153 }
154 body.fileedit #fileedit-stash-selector select {
155 margin: 0 1em;
156 height: initial;
157 font-family: monospace;
158
--- src/style.fileedit.css
+++ src/style.fileedit.css
@@ -147,11 +147,11 @@
147 body.fileedit #fileedit-stash-selector {
148 margin: 0.25em;
149 display: flex;
150 flex-direction: row;
151 flex-wrap: wrap;
152 align-items: center;
153 }
154 body.fileedit #fileedit-stash-selector select {
155 margin: 0 1em;
156 height: initial;
157 font-family: monospace;
158
M src/style.wikiedit.css
+1 -1
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -181,11 +181,11 @@
181181
 body.wikiedit #wikiedit-stash-selector {
182182
 margin: 0.25em;
183183
 display: flex;
184184
 flex-direction: row;
185185
 flex-wrap: wrap;
186
- align-items: baseline;
186
+ align-items: center;
187187
 }
188188
 body.wikiedit #wikiedit-stash-selector select {
189189
 margin: 0 1em 0 0.5em;
190190
 height: initial;
191191
 font-family: monospace;
192192
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -181,11 +181,11 @@
181 body.wikiedit #wikiedit-stash-selector {
182 margin: 0.25em;
183 display: flex;
184 flex-direction: row;
185 flex-wrap: wrap;
186 align-items: baseline;
187 }
188 body.wikiedit #wikiedit-stash-selector select {
189 margin: 0 1em 0 0.5em;
190 height: initial;
191 font-family: monospace;
192
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -181,11 +181,11 @@
181 body.wikiedit #wikiedit-stash-selector {
182 margin: 0.25em;
183 display: flex;
184 flex-direction: row;
185 flex-wrap: wrap;
186 align-items: center;
187 }
188 body.wikiedit #wikiedit-stash-selector select {
189 margin: 0 1em 0 0.5em;
190 height: initial;
191 font-family: monospace;
192

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button