1- /* GENERAL */
1+ /* GENERAL > */
22
33.togglectrl_footer {
44 margin-top : 1em ;
55 text-align : center;
66 font-size : .75em ;
77}
88
9- /* SETTINGS */
9+ /* < GENERAL */
1010
11- fieldset legend {
12- top : 0 ;
13- margin-left : -11px ;
14- padding : 2px 10px ;
15- border-radius : 5px 5px 0 0 ;
16- border-top : inherit;
17- border-left : inherit;
18- background-color : inherit;
19- }
11+ /* SETTINGS > */
2012
21- fieldset dt label {
22- cursor : inherit;
23- }
13+ fieldset {
14+ & legend {
15+ top : 0 ;
16+ margin-left : -11px ;
17+ padding : 2px 10px ;
18+ border-radius : 5px 5px 0 0 ;
19+ border-top : inherit;
20+ border-left : inherit;
21+ background-color : inherit;
22+ }
2423
25- fieldset p .submit-buttons {
26- margin-top : 0 ;
27- padding : 0 4px 4px 4px ;
28- }
24+ & dt label {
25+ cursor : inherit;
26+ }
2927
30- /*
31- * phpBB ACP Toggles - A CSS class that makes it easy to display checkboxes as toggles.
32- * Source : https://danklammer.com/articles/simple-css-toggle-switch/
33- * Revision by: Kirk (customization and optimization), LukeWCS (optimization)
34- */
28+ & p . submit-buttons {
29+ margin-top : 0 ;
30+ padding : 0 4 px 4 px 4 px ;
31+ }
32+ }
3533
3634.toggle {
37- -webkit-appearance : none;
38- -moz-appearance : none;
35+ /* phpBB Kirk Toggles 2.0 - A CSS class that makes it easy to display checkboxes as toggles.
36+ Source : https://danklammer.com/articles/simple-css-toggle-switch/
37+ Revision by: Kirk (customization and optimization), LukeWCS (optimization) */
38+
39+ /* Kirk style: */
40+ /* --background-transition: ease 0.3s; */
41+ /* --background-color-off: #a00; */
42+ /* --background-color-on: #3fa651; */
43+ /* --slider-transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s; */
44+
3945 appearance : none;
46+ position : relative;
4047 width : 38px ;
4148 height : 17px ;
42- position : relative;
4349 border-radius : 50px ;
4450 cursor : pointer;
4551 font-family : FontAwesome;
46- transition : background-color 0.2s ;
47- }
52+ transition : var (--background-transition , 0.2s );
4853
49- .toggle : before {
50- position : absolute;
51- width : 14px ;
52- height : 13px ;
53- background-color : # ffffff ;
54- top : 2px ;
55- border-radius : 50% ;
56- display : flex;
57- justify-content : center;
58- align-items : center;
59- left : 22px ;
60- content : "\f00d" ;
61- transition : 0.2s ;
62- }
54+ & ,
55+ & : hover ,
56+ & : focus {
57+ background : var (--background-color-off , # ccc );
58+ border : none;
59+ color : # 000 ;
60+ }
6361
64- .toggle ,
65- .toggle : hover ,
66- .toggle : focus {
67- background-color : # cccccc ;
68- border : none;
69- color : # 000000 ;
70- }
62+ & : before {
63+ content : "\f00d" ;
64+ justify-content : center;
65+ position : absolute;
66+ top : 2px ;
67+ left : 22px ;
68+ width : 14px ;
69+ height : 13px ;
70+ background : # fff ;
71+ border-radius : 50% ;
72+ display : flex;
73+ align-items : center;
74+ transition : var (--slider-transition , 0.2s );
75+ }
7176
72- .toggle : checked {
73- background-color : # 3b87ab ;
74- }
77+ & : checked {
78+ background : var (--background-color-on , # 3b87ab );
7579
76- .toggle : checked : before {
77- left : 2px ;
78- content : "\f00c" ;
80+ & : before {
81+ content : "\f00c" ;
82+ left : 2px ;
83+ }
84+ }
7985}
8086
81- /* RESPONSIVE */
87+ /* < SETTINGS */
88+
89+ /* RESPONSIVE > */
8290
8391@media (max-width : 700px ) {
8492 legend {
@@ -90,3 +98,5 @@ fieldset p.submit-buttons {
9098 margin-top : .5em ;
9199 }
92100}
101+
102+ /* < RESPONSIVE */
0 commit comments