YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Customizing design of About Page, standardizing old W95 styles

Browse Source
This commit is contained in:
Dominic Masters
2018-03-13 06:02:44 +11:00
parent 9e0350322b
commit 666bafe98a
12 changed files with 146 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
public/styles/components/w95/_mixins.scss Normal file
View File

@ -0,0 +1,52 @@
@mixin border95($thickness) {
border: (3px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95window.png');
border-image-slice: 3 * $thickness;
}
@mixin button95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button.png');
border-image-slice: 2 * $thickness;
display: inline-block;
color: black;
background-image: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button_icons.png');
background-color: $w95WindowBG;
background-position: 0px 0px;
background-size: 48px*$thickness 20px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button_inverted.png');
}
&.disabled {
background-position-y: 10px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button.png');
}
}
}
@mixin frame95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95frame.png');
border-image-slice: 2 * $thickness;
}
@mixin window95($scale) {
@extend %no-select;
@include border95($scale);
background: $w95WindowBG;
font-family: $w95Font;
font-size: 12px*$scale;
display: inline-block;
&.inactive {
> .title {
background-color: $w95Disabled;
}
}
}

6
public/styles/components/w95/_text-field.scss Normal file
View File

@ -0,0 +1,6 @@
.c-text-field {
@include frame95($w95Scale);
background: white;
color: black;
cursor: text;
}

8
public/styles/components/w95/_title-bar.scss Normal file
View File

@ -0,0 +1,8 @@
.c-title-bar {
width: 100%;
color: white;
background: #000080;
padding: 2px * $w95Scale;
font-weight: bold;
margin-bottom: 1px * $w95Scale;
}

3
public/styles/components/w95/_window.scss Normal file
View File

@ -0,0 +1,3 @@
.c-window {
@include window95($w95Scale);
}

7
public/styles/components/w95/settings.scss Normal file
View File

@ -0,0 +1,7 @@
$w95WindowBG: #C0C0C0;
$w95Highlight: #0000BF;
$w95Disabled: #808080;
$w95Font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif;
$w95ImageScale: 1;
$w95Scale: 2;