rails7.2で、cssを個別に指定したい

実現したいこと

cssファイルを個別に適応させたい

発生している問題・分からないこと

app/assets/stylesheet下に個別でtop.cssとlogin.cssを作成し、viewの先頭で指定して実行したが、top.cssは正しく適応されるが、ログイン画面に遷移したら本来指定している色とは異なる色で表示されてしまう

該当のソースコード

application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title><%= content_for(:title) || "Code Start" %></title>
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <meta name="apple-mobile-web-app-capable" content="yes">
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9
10    <%= yield :head %>
11
12    <link rel="manifest" href="/manifest.json">
13    <link rel="icon" href="/icon.png" type="image/png">
14    <link rel="icon" href="/icon.svg" type="image/svg+xml">
15    <link rel="apple-touch-icon" href="/icon.png">
16    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
17    <!-- 以下を追加 -->
18    <%= yield :stylesheets %> 
19    <%= javascript_importmap_tags %>
20  </head>
21  <body>
22    <%= yield %>
23  </body>
24</html>
25

top.html.erb
1<% content_for :stylesheets do %>
2    <%= stylesheet_link_tag "top", "data-turbo-track": "reload" %>
3<% end %>
4
5
6<div id="splash-screen">
7    <h1>Code Start</h1>
8</div>
9
10<div id="main-content" class="hidden">
11    <div class="btn-area">
12        <%= link_to "ログイン", new_user_session_path, class: "login-link" %>
13        <%= link_to "新規登録", new_user_registration_path, class: "signup-link" %>
14    </div>
15
16    <div class="area" >
17        <ul class="circles">
18            <li></li>
19            <li></li>
20            <li></li>
21            <li></li>
22            <li></li>
23            <li></li>
24            <li></li>
25            <li></li>
26            <li></li>
27            <li></li>
28        </ul>
29    </div >
30</div>
31
32
33
34<script>
35document.addEventListener("DOMContentLoaded", function() {
36    setTimeout(function() {
37        const splashScreenText = document.querySelector("#splash-screen h1");
38        splashScreenText.style.opacity = 0;
39
40        setTimeout(function() {
41            const splashScreen = document.getElementById("splash-screen");
42            splashScreen.style.display = "none";
43
44            const mainContent = document.getElementById("main-content");
45            mainContent.classList.remove("hidden");
46            mainContent.style.opacity = 1;
47
48            // 3秒後に visible クラスを追加して、トランジションを実行
49            setTimeout(function() {
50                document.querySelector(".login-link").classList.add("visible");
51                document.querySelector(".signup-link").classList.add("visible");
52            }, 600); // ボタンのフェードインをさらに3秒後に遅延させる
53        }, 3000);
54    }, 3000);
55});
56</script>

sessions/new.html.erb
1<% content_for :stylesheets do %>
2  <%= stylesheet_link_tag "login", "data-turbo-track": "reload" %>
3<% end %>
4
5
6  <h2>Log in</h2>
7
8  <div class="login-form">
9    <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
10      <div class="field">
11        <%= f.label :email %><br />
12        <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
13      </div>
14
15      <div class="field">
16        <%= f.label :password %><br />
17        <%= f.password_field :password, autocomplete: "current-password" %>
18      </div>
19
20      <% if devise_mapping.rememberable? %>
21        <div class="field">
22          <%= f.check_box :remember_me %>
23          <%= f.label :remember_me %>
24        </div>
25      <% end %>
26
27      <div class="actions">
28        <%= f.submit "Log in" %>
29      </div>
30    <% end %>
31  </div>
32
33  <%= render "devise/shared/links" %>
34
35
36  <div class="area" >
37    <ul class="circles">
38      <li></li>
39      <li></li>
40      <li></li>
41      <li></li>
42      <li></li>
43      <li></li>
44      <li></li>
45      <li></li>
46      <li></li>
47      <li></li>
48    </ul>
49  </div >
50
51

top.css
1body {
2    margin: 0;
3    font-family: 'Exo', sans-serif; 
4}
5
6#splash-screen {
7    position: fixed;
8    top: 0;
9    left: 0;
10    width: 100%;
11    height: 100%;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15    background-color: #4e54c8;
16    z-index: 1000;
17}
18
19#splash-screen h1 {
20    font-size: 3em;
21    color: #ffffff;
22    opacity: 1;
23    transition: opacity 3s ease;
24}
25
26#main-content {
27    opacity: 0;
28    background-color: #4e54c8;
29    transition: opacity 3s ease;
30    height: 100%;
31    width: 100%;
32    position: fixed; /* 画面に固定 */
33    overflow: hidden; /* スクロールを無効化 */
34}
35
36.hidden {
37    display: none;
38}
39
40.btn-area {
41    display: flex; /* フレックスボックスを利用 */
42    flex-direction: row; /* 要素を横方向に並べる */
43    align-items: center; /* 垂直方向の中央揃え */
44    justify-content: center; /* 水平方向の中央揃え */
45    height: 100vh; /* 画面全体の高さを占める */
46    gap: 20px; /* ボタン間の余白 */
47}
48
49.login-link {
50    margin-right: 10%;
51}
52
53.login-link, .signup-link {
54    font-size: 1.2em;
55    color: #ffffff;
56    margin: 20px;
57    text-decoration: none;
58    opacity: 0;
59    /* 
60        opacityを設定してデフォルトで透明にすると要素が他の要素の下に入ってしまい、表示されていてもクリックできない状況があるため、
61        先頭に持ってくることで触れるようにする
62    */
63    z-index: 1; 
64    transition: opacity 3s ease, background-color 0.3s ease; /* 透過の変化を3秒かけて行う */
65    background-color: #8f94fb;
66    border-radius: 8px;
67    padding: 18px 60px;
68    display: inline-block; /* ボタンとして見せるためのインラインブロック */
69    text-align: center;
70    cursor: pointer; /* カーソルをポインターに変更 */
71}
72
73.visible {
74    opacity: 1; /* 表示状態 */
75}
76
77.login-link:hover, .signup-link:hover {
78    background-color: red; /* ホバー時に背景色を赤に変更 */
79}
80
81@keyframes fadeOutText {
82    0% { opacity: 1; }
83    100% { opacity: 0; }
84}
85
86/* 新規スタイル追加 */
87.context {
88    width: 100%;
89    position: absolute;
90    top: 50vh;
91}
92
93.context h1 {
94    text-align: center;
95    color: #fff;
96    font-size: 50px;
97}
98
99.area {
100    background: #4e54c8;
101    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
102    width: 100%;
103    height: 100vh;
104}
105
106.circles {
107    position: absolute;
108    top: 0;
109    left: 0;
110    width: 100%;
111    height: 100%;
112    overflow: hidden;
113}
114
115.circles li {
116    position: absolute;
117    display: block;
118    list-style: none;
119    width: 20px;
120    height: 20px;
121    background: rgba(255, 255, 255, 0.2);
122    animation: animate 25s linear infinite;
123    bottom: -150px;
124}
125
126.circles li:nth-child(1) {
127    left: 25%;
128    width: 80px;
129    height: 80px;
130    animation-delay: 0s;
131}
132
133.circles li:nth-child(2) {
134    left: 10%;
135    width: 20px;
136    height: 20px;
137    animation-delay: 2s;
138    animation-duration: 12s;
139}
140
141.circles li:nth-child(3) {
142    left: 70%;
143    width: 20px;
144    height: 20px;
145    animation-delay: 4s;
146}
147
148.circles li:nth-child(4) {
149    left: 40%;
150    width: 60px;
151    height: 60px;
152    animation-delay: 0s;
153    animation-duration: 18s;
154}
155
156.circles li:nth-child(5) {
157    left: 65%;
158    width: 20px;
159    height: 20px;
160    animation-delay: 0s;
161}
162
163.circles li:nth-child(6) {
164    left: 75%;
165    width: 110px;
166    height: 110px;
167    animation-delay: 3s;
168}
169
170.circles li:nth-child(7) {
171    left: 35%;
172    width: 150px;
173    height: 150px;
174    animation-delay: 7s;
175}
176
177.circles li:nth-child(8) {
178    left: 50%;
179    width: 25px;
180    height: 25px;
181    animation-delay: 15s;
182    animation-duration: 45s;
183}
184
185.circles li:nth-child(9) {
186    left: 20%;
187    width: 15px;
188    height: 15px;
189    animation-delay: 2s;
190    animation-duration: 35s;
191}
192
193.circles li:nth-child(10) {
194    left: 85%;
195    width: 150px;
196    height: 150px;
197    animation-delay: 0s;
198    animation-duration: 11s;
199}
200
201@keyframes animate {
202    0% {
203        transform: translateY(0) rotate(0deg);
204        opacity: 1;
205        border-radius: 0;
206    }
207    100% {
208        transform: translateY(-1000px) rotate(720deg);
209        opacity: 0;
210        border-radius: 50%;
211    }
212}

login.css
1/* login.css */
2body {
3    background-color: #4e54c8;
4}
5
6.login-form {
7    margin: 0 auto;
8    width: 300px;
9    padding: 20px;
10    background-color: #ffffff;
11    border-radius: 8px;
12    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
13}
14
15.field {
16    margin-bottom: 15px;
17}
18
19.field label {
20    display: block;
21    margin-bottom: 5px;
22}
23
24.field input {
25    width: 100%;
26    padding: 8px;
27    box-sizing: border-box;
28}
29
30.actions {
31    text-align: center;
32}
33
34.actions input {
35    padding: 10px 20px;
36    background-color: white;
37    color: black;
38    border: none;
39    border-radius: 4px;
40    cursor: pointer;
41}
42
43.actions input:hover {
44    background-color: #8f94fb;
45}