Changes for page Home

Last modified by Jesse Veentjer on 06-5-2024 05:01
From version 219.12
edited by Jesse Veentjer
on 15-2-2024 05:00
Change comment: There is no comment for this version
To version 219.23
edited by Jesse Veentjer
on 16-2-2024 02:39
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[0]
Code
... ... @@ -3,20 +3,20 @@
3 3   height: 169px;
4 4   width: 100%;
5 5  }
6 +
6 6   /* Styling for the button */
7 7   .login-btn {
8 8   display: inline-block;
9 - padding: 25% 10%;
10 - /* padding: 24px 48px; /* Increased padding for a slightly bigger button */
10 + padding: 24px 48px; /* Increased padding for a slightly bigger button */
11 11   background-color: #D9D9D9; /* Grijs (formulier - header) */
12 12   color: #000; /* Text color */
13 13   border: none;
14 14   border-radius: 5px;
15 - font-size: 18px; /* Increased font size for a slightly larger button */
15 + font-size: 27px; /* Increased font size for a slightly larger button */
16 16   cursor: pointer;
17 - position: center;
17 + position: relative;
18 18   overflow: hidden;
19 - transition: all 0.5s ease;
19 + transition: all 0.3s ease;
20 20   }
21 21  
22 22   /* Styling for the button hover effect */
... ... @@ -33,7 +33,7 @@
33 33   width: 300%;
34 34   height: 300%;
35 35   background-color: #878787;
36 - transition: all 0.5s ease;
36 + transition: all 0.3s ease;
37 37   border-radius: 50%;
38 38   z-index: 0;
39 39   transform: translate(-50%, -50%);
... ... @@ -51,4 +51,62 @@
51 51   position: relative;
52 52   z-index: 1;
53 53   }
54 - }
54 +
55 +/* Styling for the smaller button */
56 +.small-login-btn {
57 + display: inline-block;
58 + padding: 12px 24px; /* Reduced padding for a smaller button */
59 + background-color: #D9D9D9; /* Grijs (formulier - header) */
60 + color: #000; /* Text color */
61 + border: none;
62 + border-radius: 5px;
63 + font-size: 18px; /* Reduced font size for a smaller button */
64 + cursor: pointer;
65 + position: relative;
66 + overflow: hidden;
67 + transition: all 0.3s ease;
68 +}
69 +
70 +/* Styling for the smaller button hover effect */
71 +.small-login-btn:hover {
72 + background-color: #F2F2F2; /* Lighter shade of grey on hover */
73 +}
74 +
75 +/* Styling for the smaller button before animation */
76 +.small-login-btn:before {
77 + content: "";
78 + position: absolute;
79 + top: 50%;
80 + left: 50%;
81 + width: 300%;
82 + height: 300%;
83 + background-color: #878787;
84 + transition: all 0.3s ease;
85 + border-radius: 50%;
86 + z-index: 0;
87 + transform: translate(-50%, -50%);
88 +}
89 +
90 +/* Animation when smaller button is clicked */
91 +.small-login-btn.clicked:before {
92 + width: 50%%;
93 + height: 50%;
94 + opacity: 0;
95 +}
96 +
97 +/* Styling for the smaller button text */
98 +.small-login-btn span {
99 + position: relative;
100 + z-index: 1;
101 +}
102 +
103 +#xwikimaincontainer {
104 + width: 970px;
105 +}
106 +
107 +#menuview {
108 + box-shadow: #000000 -75rem 0px 0px, #000000 75rem 0px 0px;
109 +}
110 +.menu.navigation-menu { /*You can also get an ID selector by inspecting the menu through dev tools*/
111 + box-shadow: #10000 -75rem 0px 0px,#10000 75rem 0px 0px;
112 +}