Skip to content

Commit a3b0348

Browse files
McShelbyMcShelby
committed
button: make link and action style colorable #863 
1 parent 5aa2115 commit a3b0348

File tree

14 files changed

+130
-54
lines changed

14 files changed

+130
-54
lines changed

‎assets/css/swagger-dark.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ body {
3838
color-relearn: var(--INTERNAL-MAIN-TEXT-color);
3939
}
4040
a {
41-
color-relearn: var(--INTERNAL-MAIN-LINK-color);
41+
color-relearn: var(--VARIABLE-LINK-color);
4242
}
4343
table {
4444
border-color: #545b5e;
@@ -1290,11 +1290,11 @@ select:-webkit-autofill {
12901290
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 16px 2px;
12911291
}
12921292
.swagger-ui .nested-links a {
1293-
color-relearn: var(--INTERNAL-MAIN-LINK-color);
1293+
color-relearn: var(--VARIABLE-LINK-color);
12941294
}
12951295
.swagger-ui .nested-links a:focus,
12961296
.swagger-ui .nested-links a:hover {
1297-
color-relearn: var(--INTERNAL-MAIN-LINK-HOVER-color);
1297+
color-relearn: var(--VARIABLE-LINK-HOVER-color);
12981298
}
12991299
.swagger-ui .opblock-tag {
13001300
border-bottom-color: rgba(117, 109, 96, 0.3);
@@ -1935,10 +1935,10 @@ select:-webkit-autofill {
19351935
color-relearn: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color);
19361936
}
19371937
.swagger-ui .info a {
1938-
color-relearn: var(--INTERNAL-MAIN-LINK-color);
1938+
color-relearn: var(--VARIABLE-LINK-color);
19391939
}
19401940
.swagger-ui .info a:hover {
1941-
color-relearn: var(--INTERNAL-MAIN-LINK-HOVER-color);
1941+
color-relearn: var(--VARIABLE-LINK-HOVER-color);
19421942
}
19431943
.swagger-ui .info .base-url {
19441944
color-relearn: var(--INTERNAL-MAIN-TEXT-color);
@@ -1970,7 +1970,7 @@ select:-webkit-autofill {
19701970
color-relearn: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color);
19711971
}
19721972
.swagger-ui .scopes h2 a {
1973-
color-relearn: var(--INTERNAL-MAIN-LINK-color);
1973+
color-relearn: var(--VARIABLE-LINK-color);
19741974
text-decoration-color: initial;
19751975
}
19761976
.swagger-ui .errors-wrapper {

‎assets/css/swagger.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ body {
5959
color: var(--INTERNAL-MAIN-TEXT-color);
6060
}
6161
a {
62-
color: var(--INTERNAL-MAIN-LINK-color);
62+
color: var(--VARIABLE-LINK-color);
6363
}
6464
input:-webkit-autofill,
6565
textarea:-webkit-autofill,
@@ -90,11 +90,11 @@ select:-webkit-autofill {
9090
color: var(--INTERNAL-MAIN-TEXT-color);
9191
}
9292
.swagger-ui .nested-links a {
93-
color: var(--INTERNAL-MAIN-LINK-color);
93+
color: var(--VARIABLE-LINK-color);
9494
}
9595
.swagger-ui .nested-links a:focus,
9696
.swagger-ui .nested-links a:hover {
97-
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
97+
color: var(--VARIABLE-LINK-HOVER-color);
9898
}
9999
.swagger-ui .opblock-tag {
100100
color: var(--INTERNAL-MAIN-TEXT-color);
@@ -365,10 +365,10 @@ select:-webkit-autofill {
365365
letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing);
366366
}
367367
.swagger-ui .info a {
368-
color: var(--INTERNAL-MAIN-LINK-color);
368+
color: var(--VARIABLE-LINK-color);
369369
}
370370
.swagger-ui .info a:hover {
371-
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
371+
color: var(--VARIABLE-LINK-HOVER-color);
372372
}
373373
.swagger-ui .info .base-url {
374374
color: var(--INTERNAL-MAIN-TEXT-color);
@@ -387,7 +387,7 @@ select:-webkit-autofill {
387387
letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing);
388388
}
389389
.swagger-ui .scopes h2 a {
390-
color: var(--INTERNAL-MAIN-LINK-color);
390+
color: var(--VARIABLE-LINK-color);
391391
}
392392
.swagger-ui .errors-wrapper .errors h4 {
393393
color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color);

‎assets/css/theme-neon.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
:root {
22
/* neon */
33
--PRIMARY-color: rgba(243, 0, 178, 1); /* brand primary color */
4-
--SECONDARY-color: rgb(50, 189, 243, 1); /* brand secondary color */
4+
--PRIMARY-HOVER-color: rgba(255, 112, 217, 1); /* brand primary hover color */
5+
--SECONDARY-color: rgba(50, 189, 243, 1); /* brand secondary color */
6+
--SECONDARY-HOVER-color: rgba(80, 215, 255, 1); /* brand secondary hover color */
57
--ACCENT-color: rgba(255, 215, 0, 1); /* brand accent color, used for search highlights */
8+
--ACCENT-HOVER-color: rgba(255, 235, 120, 1); /* brand accent hover color */
69

710
--MAIN-TEXT-color: rgba(224, 224, 224, 1); /* text color of content and titles */
8-
--MAIN-LINK-HOVER-color: rgb(80, 215, 255, 1); /* hovered link color of content */
911
--MAIN-BG-color: rgba(16, 16, 16, 1); /* background color of content */
1012

1113
/* optional overwrites for specific headers */

‎assets/css/theme-relearn-bright.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
:root {
22
/* relearn-bright */
33
--PRIMARY-color: rgba(131, 201, 50, 1); /* brand primary color */
4+
--PRIMARY-HOVER-color: rgba(99, 159, 2, 1); /* brand primary hover color */
45
--SECONDARY-color: rgba(99, 128, 208, 1); /* brand secondary color */
5-
--ACCENT-color: rgb(255, 102, 78, 1); /* brand accent color, used for search highlights */
6+
--SECONDARY-HOVER-color: rgba(32, 40, 145, 1); /* brand secondary hover color */
7+
--ACCENT-color: rgba(255, 102, 78, 1); /* brand accent color, used for search highlights */
8+
--ACCENT-HOVER-color: rgba(226, 85, 64, 1); /* brand accent hover color */
69

710
--MAIN-TEXT-color: rgba(0, 0, 0, 1); /* text color of content and titles */
8-
--MAIN-LINK-HOVER-color: rgba(32, 40, 145, 1); /* hovered link color of content */
911
--MAIN-BG-color: rgba(255, 255, 255, 1); /* background color of content */
1012
--MAIN-TITLES-TEXT-color: rgba(16, 16, 16, 1); /* text color of titles and transparent box titles */
1113

‎assets/css/theme-relearn-dark.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
:root {
22
/* relearn-dark */
33
--PRIMARY-color: rgba(125, 201, 3, 1); /* brand primary color */
4+
--PRIMARY-HOVER-color: rgba(145, 234, 3, 1); /* brand primary hover color */
45
--SECONDARY-color: rgba(108, 140, 227, 1); /* brand secondary color */
5-
--ACCENT-color: rgb(255, 102, 78, 1); /* brand accent color, used for search highlights */
6+
--SECONDARY-HOVER-color: rgba(147, 176, 255, 1); /* brand secondary hover color */
7+
--ACCENT-color: rgba(255, 102, 78, 1); /* brand accent color, used for search highlights */
8+
--ACCENT-HOVER-color: rgba(255, 144, 126, 1); /* brand accent hover color */
69

710
--MAIN-TEXT-color: rgba(224, 224, 224, 1); /* text color of content and titles */
8-
--MAIN-LINK-HOVER-color: rgba(147, 176, 255, 1); /* hovered link color of content */
911
--MAIN-BG-color: rgba(32, 32, 32, 1); /* background color of content */
1012
--MAIN-TITLES-TEXT-color: rgba(255, 255, 255, 1); /* text color of titles and transparent box titles */
1113

‎assets/css/theme-relearn-light.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
:root {
22
/* relearn-light */
33
--PRIMARY-color: rgba(125, 201, 3, 1); /* brand primary color */
4+
--PRIMARY-HOVER-color: rgba(99, 159, 2, 1); /* brand primary hover color */
45
--SECONDARY-color: rgba(72, 106, 201, 1); /* brand secondary color */
5-
--ACCENT-color: rgb(255, 102, 78); /* brand accent color, used for search highlights */
6+
--SECONDARY-HOVER-color: rgba(32, 40, 145, 1); /* brand secondary hover color */
7+
--ACCENT-color: rgba(255, 102, 78, 1); /* brand accent color, used for search highlights */
8+
--ACCENT-HOVER-color: rgba(226, 85, 64, 1); /* brand accent hover color */
69

710
--MAIN-TEXT-color: rgba(0, 0, 0, 1); /* text color of content and titles */
8-
--MAIN-LINK-HOVER-color: rgba(32, 40, 145, 1); /* hovered link color of content */
911
--MAIN-BG-color: rgba(255, 255, 255, 1); /* background color of content */
1012
--MAIN-TITLES-TEXT-color: rgba(16, 16, 16, 1); /* text color of titles and transparent box titles */
1113

‎assets/css/theme-zen-dark.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
:root {
22
/* zen-dark */
33
--PRIMARY-color: rgba(47, 129, 235, 1); /* brand primary color */
4+
--PRIMARY-HOVER-color: rgba(112, 174, 245, 1); /* brand primary hover color */
45
--SECONDARY-color: rgba(47, 129, 235, 1); /* brand secondary color */
6+
--SECONDARY-HOVER-color: rgba(112, 174, 245, 1); /* brand secondary hover color */
57

68
--MAIN-TOPBAR-BORDER-color: rgba(71, 71, 71, 1); /* border color between topbar and content */
7-
--MAIN-LINK-HOVER-color: rgb(112, 174, 245); /* hovered link color of content */
89
--MAIN-BG-color: rgba(32, 32, 32, 1); /* background color of content */
910
--MAIN-TEXT-color: rgba(224, 224, 224, 1); /* text color of content and titles */
1011
--MAIN-TITLES-TEXT-color: rgba(255, 255, 255, 1); /* text color of titles and transparent box titles */

‎assets/css/theme-zen-light.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
:root {
22
/* zen-light */
33
--PRIMARY-color: rgba(26, 115, 232, 1); /* brand primary color */
4+
--PRIMARY-HOVER-color: rgba(32, 40, 145, 1); /* brand primary hover color */
45
--SECONDARY-color: rgba(26, 115, 232, 1); /* brand secondary color */
6+
--SECONDARY-HOVER-color: rgba(32, 40, 145, 1); /* brand secondary hover color */
57

68
--MAIN-TOPBAR-BORDER-color: rgba(210, 210, 210, 1); /* border color between topbar and content */
7-
--MAIN-LINK-HOVER-color: rgba(32, 40, 145, 1); /* hoverd link color of content */
89
--MAIN-BG-color: rgba(255, 255, 255, 1); /* background color of content */
910
--MAIN-TEXT-color: rgba(0, 0, 0, 1); /* text color of content and titles */
1011
--MAIN-TITLES-TEXT-color: rgba(16, 16, 16, 1); /* text color of titles and transparent box titles */

‎assets/css/theme.css‎

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ html {
108108
color-scheme: only var(--INTERNAL-BROWSER-theme);
109109
height: 100%;
110110
width: 100%;
111+
--VARIABLE-LINK-color: var(--INTERNAL-MAIN-LINK-color);
112+
--VARIABLE-LINK-HOVER-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
111113
}
112114

113115
body {
@@ -150,13 +152,13 @@ dd {
150152
}
151153

152154
a {
153-
color: var(--INTERNAL-MAIN-LINK-color);
155+
color: var(--VARIABLE-LINK-color);
154156
}
155157

156158
a:hover,
157159
a:active,
158160
a:focus {
159-
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
161+
color: var(--VARIABLE-LINK-HOVER-color);
160162
}
161163

162164
.default-animation {
@@ -625,7 +627,7 @@ article a:focus > svg:only-child:empty,
625627
article a:hover > img:only-child:empty,
626628
article a:active > img:only-child:empty,
627629
article a:focus > img:only-child:empty {
628-
outline: 0.15rem solid var(--INTERNAL-MAIN-LINK-HOVER-color);
630+
outline: 0.15rem solid var(--VARIABLE-LINK-HOVER-color);
629631
}
630632

631633
#R-body-inner:focus-visible {
@@ -1301,6 +1303,10 @@ tbody > tr:nth-child(even) > td {
13011303
.topbar-button > .btn {
13021304
font-size: 1rem;
13031305
}
1306+
.topbar-button > .btn.cstyle {
1307+
--VARIABLE-LINK-color: var(--INTERNAL-TOPBAR-BUTTON-color);
1308+
--VARIABLE-LINK-HOVER-color: var(--INTERNAL-TOPBAR-BUTTON-HOVER-color);
1309+
}
13041310

13051311
.topbar-button > .btn > button:disabled i,
13061312
.topbar-button > .btn > span i {
@@ -1796,6 +1802,12 @@ i.cstyle {
17961802
-webkit-user-select: none;
17971803
user-select: none;
17981804
}
1805+
1806+
.btn.cstyle {
1807+
--VARIABLE-LINK-color: var(--INTERNAL-MAIN-BUTTON-color);
1808+
--VARIABLE-LINK-HOVER-color: var(--INTERNAL-MAIN-BUTTON-HOVER-color);
1809+
}
1810+
17991811
.btn.interactive {
18001812
cursor: pointer;
18011813
}
@@ -1885,7 +1897,7 @@ button.btn.noborder,
18851897
-webkit-appearance: none;
18861898
appearance: none;
18871899
background-color: transparent;
1888-
color: var(--INTERNAL-MAIN-LINK-color);
1900+
color: var(--VARIABLE-LINK-color);
18891901
cursor: pointer;
18901902
font-size: 0.5em;
18911903
margin-inline-start: 0.66em;
@@ -1902,7 +1914,7 @@ button.btn.noborder,
19021914
.anchor:hover,
19031915
.anchor:active,
19041916
.anchor:focus {
1905-
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
1917+
color: var(--VARIABLE-LINK-HOVER-color);
19061918
}
19071919

19081920
h2:hover .anchor,
@@ -2157,7 +2169,7 @@ span.math:has(> mjx-container[display]) {
21572169
}
21582170

21592171
#R-searchresults .autocomplete-suggestion {
2160-
color: var(--INTERNAL-MAIN-LINK-color);
2172+
color: var(--VARIABLE-LINK-color);
21612173
display: block;
21622174
font-size: 1.3rem;
21632175
font-weight: 500;
@@ -2568,7 +2580,7 @@ body #R-logo svg :not([fill='#000000']) {
25682580
appearance: none;
25692581
background-color: transparent;
25702582
border: 1px solid transparent;
2571-
color: var(--INTERNAL-MAIN-LINK-color);
2583+
color: var(--VARIABLE-LINK-color);
25722584
display: block;
25732585
font-size: 0.9rem;
25742586
font-weight: 300;
@@ -2586,7 +2598,7 @@ body #R-logo svg :not([fill='#000000']) {
25862598
#R-body .tab-nav-button:not(.active):hover,
25872599
#R-body .tab-nav-button:not(.active):active,
25882600
#R-body .tab-nav-button:not(.active):focus {
2589-
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
2601+
color: var(--VARIABLE-LINK-HOVER-color);
25902602
}
25912603

25922604
#R-body .tab-nav-button > .tab-nav-text {
@@ -2612,7 +2624,7 @@ body #R-logo svg :not([fill='#000000']) {
26122624
#R-body .tab-nav-button:not(.active):hover > .tab-nav-text,
26132625
#R-body .tab-nav-button:not(.active):active > .tab-nav-text,
26142626
#R-body .tab-nav-button:not(.active):focus > .tab-nav-text {
2615-
border-bottom-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
2627+
border-bottom-color: var(--VARIABLE-LINK-HOVER-color);
26162628
}
26172629

26182630
#R-body .tab-content {
@@ -2688,6 +2700,8 @@ body #R-logo svg :not([fill='#000000']) {
26882700
border-bottom-style: solid;
26892701
border-bottom-width: 1px;
26902702
color: var(--INTERNAL-TOPBAR-TEXT-color);
2703+
--VARIABLE-LINK-color: var(--INTERNAL-TOPBAR-LINK-color);
2704+
--VARIABLE-LINK-HOVER-color: var(--INTERNAL-TOPBAR-LINK-HOVER-color);
26912705
}
26922706

26932707
#R-header-topbar {
@@ -2857,12 +2871,12 @@ body.notfound #shrug svg {
28572871
padding-top: 0;
28582872
}
28592873
.box.expand.cstyle.transparent > .box-label {
2860-
color: var(--INTERNAL-MAIN-LINK-color);
2874+
color: var(--VARIABLE-LINK-color);
28612875
}
28622876
.box.expand.cstyle.transparent > .box-label:hover,
28632877
.box.expand.cstyle.transparent > .box-label:active,
28642878
.box.expand.cstyle.transparent > .box-label:focus {
2865-
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
2879+
color: var(--VARIABLE-LINK-HOVER-color);
28662880
}
28672881

28682882
.box.cstyle.transparent > .box-content {
@@ -2916,12 +2930,12 @@ body.notfound #shrug svg {
29162930
}
29172931

29182932
.card-container > .card.card-popout {
2919-
border: 1px solid color-mix(in srgb, var(--INTERNAL-MAIN-LINK-color) 33%, transparent);
2933+
border: 1px solid color-mix(in srgb, var(--VARIABLE-LINK-color) 33%, transparent);
29202934
}
29212935

29222936
/* top handle */
29232937
.card-container .card::before {
2924-
background: linear-gradient(90deg, var(--INTERNAL-MAIN-LINK-color) 0%, color-mix(in srgb, var(--INTERNAL-MAIN-LINK-color) 60%, white) 100%);
2938+
background: linear-gradient(90deg, var(--VARIABLE-LINK-color) 0%, color-mix(in srgb, var(--VARIABLE-LINK-color) 60%, white) 100%);
29252939
content: '';
29262940
height: 3px;
29272941
left: 0;
@@ -2933,8 +2947,8 @@ body.notfound #shrug svg {
29332947
}
29342948

29352949
.card-container .card.card-popout:hover {
2936-
border-color: color-mix(in srgb, var(--INTERNAL-MAIN-LINK-color) 40%, transparent);
2937-
box-shadow: 0 8px 25px color-mix(in srgb, var(--INTERNAL-MAIN-LINK-color) 25%, transparent);
2950+
border-color: color-mix(in srgb, var(--VARIABLE-LINK-color) 40%, transparent);
2951+
box-shadow: 0 8px 25px color-mix(in srgb, var(--VARIABLE-LINK-color) 25%, transparent);
29382952
transform: translateY(-4px) translateX(4px);
29392953
}
29402954

@@ -3043,9 +3057,23 @@ body[data-theme='dark'] .card-container .card:hover,
30433057

30443058
.cstyle {
30453059
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
3060+
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
30463061
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
30473062
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
3048-
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
30493063
-webkit-print-color-adjust: exact;
30503064
color-adjust: exact;
30513065
}
3066+
3067+
.cstyle.link {
3068+
--VARIABLE-BOX-color: transparent;
3069+
--VARIABLE-BOX-TEXT-color: var(--VARIABLE-LINK-HOVER-color);
3070+
--VARIABLE-BOX-CAPTION-color: var(--VARIABLE-LINK-color);
3071+
--VARIABLE-BOX-BG-color: rgba(160, 160, 160, 0.2);
3072+
}
3073+
3074+
.cstyle.action {
3075+
--VARIABLE-BOX-color: rgba(160, 160, 160, 0.2);
3076+
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-BG-color);
3077+
--VARIABLE-BOX-CAPTION-color: var(--VARIABLE-LINK-color);
3078+
--VARIABLE-BOX-BG-color: var(--VARIABLE-LINK-color);
3079+
}

0 commit comments

Comments
 (0)