sonic-lockandload.github.io/legacy.css at main · Sonic-LockandLoad/sonic-lockandload.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro&display=swap');
@import url('style.css');

body {
    font-family: 'Noto Sans', sans-serif;
}
kbd {
    font-family: 'Source Code Pro', monospace;
}
.framed {
    max-width: 100%;
    border: 5px solid;
    border-image: linear-gradient(150deg, #4B0AFC 25%, #8b61ff 75%) 1;
}

a {
    color: #4f98cf;
    transition: 0.1s;
}
a:hover  { color: #7ca3d3; }
a:active { color: #3857a5; }
#separator {
    padding: 3px;
    border: none;
    background: linear-gradient(90deg, #333333 0%, #4B0AFC 20%, #03d1f5 50%, #4B0AFC 80%, #333333 100%);
    max-width: 100%;
}

#header {
    color: #dbdbdb;
    background: linear-gradient(130deg, #4B0AFC 0%, #046bca 30%, #65c3e6 100%);
    width: 100%;
}
#header a, #footer a {
    color: #dddddd;
}

#footer {
    text-align: center;
    font-size: 80%;
    color: white;
    background: linear-gradient(130deg, #4B0AFC 0%, #046bca 30%, #65c3e6 100%);
    padding-bottom: 5px;
}

#box-links a  {
    color: white;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    line-height: 1.2;
    background-color: #507ab9;
    padding: 10px;
    transition: .2s;
}
#box-links a:hover {
    background-color: #6a83ce;
}
#box-links a:active {
    background-color: #3a339b;
}

#box-link {
    color: white;
    text-decoration: none;
    line-height: 1.3;
}
#box-link div {
    background-color: #5053b9;
    padding: 2px 25px;
    margin: 20px;
    box-shadow: 5px 5px 0px 0px #0000006b;
    transition: .2s;
}
#box-link div:hover {
    background-color: #6a6cce;
    box-shadow: 7px 7px 0px 0px #00000091;
}
#box-link div:active {
    background-color: #43339b;
    box-shadow: 0px 0px 0px 0px #000000;
}

/* Light mode */
@media (prefers-color-scheme: light) {
    #separator {
        background: linear-gradient(90deg, #DDDDDD 0%, #013DB4 20%, #32bbfa 50%, #013DB4 80%, #DDDDDD 100%);
    }
}