Inline SFC CSS classes into a separate CSS file to prevent conflicts with styles.css

This commit is contained in:
Andrei Andreev 2021-12-03 18:58:40 +03:00
parent 4e88cb07dd
commit 1c1e8fbdc5
5 changed files with 109 additions and 107 deletions

View File

@ -14,6 +14,7 @@
<link rel="stylesheet" type="text/css" href="stylesheets/codemirror/lint.css">
<link rel="stylesheet" type="text/css" href="stylesheets/codemirror/panda-syntax.css">
<link rel="stylesheet" type="text/css" href="stylesheets/codemirror/liquibyte.css">
<link rel="stylesheet" type="text/css" href="stylesheets/vue-sfc-classes.css">
<link rel="stylesheet" type="text/css" href="stylesheets/components.css">
<link rel="stylesheet" type="text/css" href="stylesheets/ad-slider-component.css">
<link rel="stylesheet" type="text/css" href="stylesheets/glyphs.css">

View File

@ -0,0 +1,108 @@
/* Temporary inlined css classes from SFCs to prevent conflicts with old classes from styles.css */
/* FooterLinks.vue */
.o-footer {
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 1.5rem;
}
/* HintText.vue */
.o-hint-text {
font-size: 1.55rem;
color: white;
text-shadow:
-0.1rem -0.1rem 0 black,
-0.1rem -0.1rem 0 black,
0.1rem -0.1rem 0 black,
0.1rem -0.1rem 0 black,
-0.1rem 0.1rem 0 black,
-0.1rem 0.1rem 0 black,
0.1rem 0.1rem 0 black,
0.1rem 0.1rem 0 black;
pointer-events: none;
}
.l-hint-text {
position: absolute;
top: -1.6rem;
left: 0;
}
/* NewsTicker.vue */
.c-news-ticker {
overflow: hidden;
}
.c-news-ticker__line {
padding-left: 100%;
transition: transform linear;
}
.c-disable-ticker-animation > * {
animation-play-state: paused !important;
}
.c-news-line {
display: inline-block;
font-family: Typewriter, serif;
font-size: 1.5rem;
white-space: nowrap;
font-weight: bold;
text-align: left;
user-select: none;
}
.c-news-line a {
text-decoration: underline;
}
.new-ui .c-news-ticker {
width: 100%;
border-bottom: 0.1rem solid var(--color-accent);
padding: 0.8rem 0;
height: 3.9rem;
}
.new-ui .c-news-line {
color: var(--color-text);
}
.old-ui .c-news-ticker {
border: 0.2rem solid black;
border-radius: 0.4rem;
padding: 0.2rem 0;
height: 3rem;
}
.old-ui .s-base--metro .c-news-ticker,
.old-ui .t-s6 .c-news-ticker,
.old-ui .t-s10 .c-news-ticker {
border-width: 0.1rem;
}
.old-ui .t-dark .c-news-ticker {
border-color: #546e7a;
background-color: #455a64;
}
.old-ui .t-dark-metro .c-news-ticker {
background-color: #455a64;
}
.old-ui .t-s1 .c-news-ticker {
background-color: #dbd242
}
.old-ui .t-s6 .c-news-ticker,
.old-ui .t-s10 .c-news-ticker {
background-color: black;
}
.old-ui .c-news-line {
color: var(--color-text);
}

View File

@ -42,12 +42,3 @@ export default {
</FooterLink>
</div>
</template>
<style scoped>
.o-footer {
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 1.5rem;
}
</style>

View File

@ -24,26 +24,3 @@ export default {
<slot />
</div>
</template>
<style scoped>
.o-hint-text {
font-size: 1.55rem;
color: white;
text-shadow:
-0.1rem -0.1rem 0 black,
-0.1rem -0.1rem 0 black,
0.1rem -0.1rem 0 black,
0.1rem -0.1rem 0 black,
-0.1rem 0.1rem 0 black,
-0.1rem 0.1rem 0 black,
0.1rem 0.1rem 0 black,
0.1rem 0.1rem 0 black;
pointer-events: none;
}
.l-hint-text {
position: absolute;
top: -1.6rem;
left: 0;
}
</style>

View File

@ -129,78 +129,3 @@ export default {
/>
</div>
</template>
<style scoped>
.c-news-ticker {
overflow: hidden;
}
.c-news-ticker__line {
padding-left: 100%;
transition: transform linear;
}
.c-disable-ticker-animation > * {
animation-play-state: paused !important;
}
.c-news-line {
display: inline-block;
font-family: Typewriter, serif;
font-size: 1.5rem;
white-space: nowrap;
font-weight: bold;
text-align: left;
user-select: none;
}
.c-news-line a {
text-decoration: underline;
}
.new-ui .c-news-ticker {
width: 100%;
border-bottom: 0.1rem solid var(--color-accent);
padding: 0.8rem 0;
height: 3.9rem;
}
.new-ui .c-news-line {
color: var(--color-text);
}
.old-ui .c-news-ticker {
border: 0.2rem solid black;
border-radius: 0.4rem;
padding: 0.2rem 0;
height: 3rem;
}
.old-ui .s-base--metro .c-news-ticker,
.old-ui .t-s6 .c-news-ticker,
.old-ui .t-s10 .c-news-ticker {
border-width: 0.1rem;
}
.old-ui .t-dark .c-news-ticker {
border-color: #546e7a;
background-color: #455a64;
}
.old-ui .t-dark-metro .c-news-ticker {
background-color: #455a64;
}
.old-ui .t-s1 .c-news-ticker {
background-color: #dbd242
}
.old-ui .t-s6 .c-news-ticker,
.old-ui .t-s10 .c-news-ticker {
background-color: black;
}
.old-ui .c-news-line {
color: var(--color-text);
}
</style>