misuzu/assets/misuzu.css/main.css

215 lines
5.5 KiB
CSS
Raw Normal View History

* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
outline-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
[hidden],
.hidden {
display: none !important;
visibility: hidden !important;
}
:root {
--font-size: 12px;
--line-height: 20px;
--font-regular: Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
--font-monospace: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--site-max-width: 1200px;
--site-mobile-width: 800px;
--site-logo: url('/images/logos/imouto-default.png');
--header-height-desktop: 70px;
--header-height-mobile: 50px;
--background-image: initial;
--background-colour: #111;
--background-colour-translucent-1: rgba(17, 17, 17, 0.1);
--background-colour-translucent-2: rgba(17, 17, 17, 0.2);
--background-colour-translucent-3: rgba(17, 17, 17, 0.3);
--background-colour-translucent-4: rgba(17, 17, 17, 0.4);
--background-colour-translucent-5: rgba(17, 17, 17, 0.5);
--background-colour-translucent-6: rgba(17, 17, 17, 0.6);
--background-colour-translucent-7: rgba(17, 17, 17, 0.7);
--background-colour-translucent-8: rgba(17, 17, 17, 0.8);
--background-colour-translucent-9: rgba(17, 17, 17, 0.9);
--background-pattern: url('/images/clouds.png') fixed;
--container-colour: #161616;
--text-colour: #fff;
--text-colour-inverted: #000;
--user-colour: inherit;
--user-header: url('/images/pixel.png');
--accent-colour: #8559a5;
--header-accent-colour: var(--accent-colour);
}
html {
scrollbar-color: var(--accent-colour) var(--background-colour);
}
.main {
display: flex;
flex-direction: column;
background-image: var(--background-image);
background-color: var(--background-colour);
font-size: var(--font-size);
line-height: var(--line-height);
font-family: var(--font-regular);
color: var(--text-colour);
background-attachment: fixed;
background-position: center center;
}
.main__wrapper {
max-width: var(--site-max-width);
width: 100%;
margin: 0 auto;
flex: 1 0 auto;
}
.main--bg-blend {
background-color: var(--accent-colour);
background-blend-mode: multiply;
}
.main--bg-slide { animation: background-slide infinite linear 2s; }
.main--bg-cover { background-size: cover; }
.main--bg-contain { background-size: contain; }
.main--bg-stretch { background-size: 100% 100%; }
.main--bg-tile { background-size: auto; }
.link {
color: var(--accent-colour);
text-decoration: none;
}
.link:hover, .link:focus { text-decoration: underline; }
@comment "convert all of the below into a proper inclusion structure";
@include animations.css;
@include avatar.css;
@include bb.css;
@include confirm.css;
@include container.css;
@include eeprom.css;
@include embed.css;
@include emoticon.css;
@include flags.css;
@include footer.css;
@include header.css;
@include impersonate.css;
@include landing.css;
@include main.css;
@include markdown.css;
@include messagebox.css;
@include navigation.css;
@include pagination.css;
@include permissions.css;
@include warning.css;
@include _input/button.css;
@include _input/checkbox.css;
@include _input/colour.css;
@include _input/select.css;
@include _input/text.css;
@include _input/textarea.css;
@include _input/upload.css;
@include auth/buttons.css;
@include auth/container.css;
@include auth/label.css;
@include auth/login.css;
@include auth/logout.css;
@include auth/register.css;
@include auth/warning.css;
@include changelog/_changelog.css;
@include changelog/change.css;
@include changelog/container.css;
@include changelog/entry.css;
@include changelog/listing.css;
@include changelog/log.css;
@include changelog/pagination.css;
@include comments/comment.css;
@include comments/comments.css;
@include forum/actions.css;
@include forum/categories.css;
@include forum/confirm.css;
@include forum/header.css;
@include forum/leaderboard.css;
@include forum/poll.css;
@include forum/post.css;
@include forum/priority.css;
@include forum/status.css;
@include forum/topics.css;
@include home/landingv2-footer.css;
@include home/landingv2-header.css;
@include home/landingv2.css;
@include manage/_manage.css;
@include manage/blacklist.css;
@include manage/changelog-actions-tags.css;
@include manage/emote.css;
@include manage/emotes.css;
@include manage/navigation.css;
@include manage/role-item.css;
@include manage/roles.css;
@include manage/settings.css;
@include manage/statistic.css;
@include manage/statistics.css;
@include manage/tag.css;
@include manage/tags.css;
@include manage/user-item.css;
@include manage/user.css;
@include manage/users.css;
@include news/container.css;
@include news/feeds.css;
@include news/list.css;
@include news/post.css;
@include news/preview.css;
@include news/sidebar.css;
@include profile/about.css;
@include profile/accounts.css;
@include profile/birthdate.css;
@include profile/forum-activity.css;
@include profile/guidelines.css;
@include profile/header.css;
@include profile/profile.css;
@include profile/relations.css;
@include profile/signature.css;
@include profile/warning.css;
@include search/anchor.css;
@include search/categories.css;
@include search/container.css;
@include search/header.css;
@include search/input.css;
@include search/none.css;
@include settings/account-logs.css;
@include settings/account.css;
@include settings/data.css;
@include settings/login-attempts.css;
@include settings/role.css;
@include settings/sessions.css;
@include settings/settings.css;
@include settings/two-factor.css;
@include user/usercard.css;
@include user/userlist.css;