diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/site/assets/styles/bulma-divider.scss | 164 | ||||
| -rw-r--r-- | src/site/assets/styles/style.scss | 94 | ||||
| -rw-r--r-- | src/site/pages/dashboard/account.vue | 5 | ||||
| -rw-r--r-- | src/site/pages/dashboard/admin/settings.vue | 6 | ||||
| -rw-r--r-- | src/site/pages/dashboard/albums/_id.vue | 3 | ||||
| -rw-r--r-- | src/site/pages/dashboard/albums/index.vue | 1 | ||||
| -rw-r--r-- | src/site/pages/dashboard/index.vue | 3 | ||||
| -rw-r--r-- | src/site/pages/dashboard/tags/index.vue | 1 | ||||
| -rw-r--r-- | src/site/pages/login.vue | 2 | ||||
| -rw-r--r-- | src/site/pages/register.vue | 3 |
10 files changed, 260 insertions, 22 deletions
diff --git a/src/site/assets/styles/bulma-divider.scss b/src/site/assets/styles/bulma-divider.scss new file mode 100644 index 0000000..713c7e4 --- /dev/null +++ b/src/site/assets/styles/bulma-divider.scss @@ -0,0 +1,164 @@ +/*! @creativebulma/bulma-divider v1.1.0 | (c) 2020 Gaetan | MIT License | https://github.com/CreativeBulma/bulma-divider */ +@-webkit-keyframes spinAround { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + +@keyframes spinAround { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + +/* line 17, src/sass/app.sass */ +.divider { + position: relative; + display: flex; + align-items: center; + text-transform: uppercase; + color: #7a7a7a; + font-size: 0.75rem; + font-weight: 600; + letter-spacing: .5px; + margin: 25px 0; +} + +/* line 28, src/sass/app.sass */ +.divider::after, .divider::before { + content: ''; + display: block; + flex: 1; + height: 1px; + background-color: #dbdbdb; +} + +/* line 37, src/sass/app.sass */ +.divider:not(.is-right)::after { + margin-left: 10px; +} + +/* line 41, src/sass/app.sass */ +.divider:not(.is-left)::before { + margin-right: 10px; +} + +/* line 45, src/sass/app.sass */ +.divider.is-left::before { + display: none; +} + +/* line 49, src/sass/app.sass */ +.divider.is-right::after { + display: none; +} + +/* line 52, src/sass/app.sass */ +.divider.is-vertical { + flex-direction: column; + margin: 0 25px; +} + +/* line 56, src/sass/app.sass */ +.divider.is-vertical::after, .divider.is-vertical::before { + height: auto; + width: 1px; +} + +/* line 61, src/sass/app.sass */ +.divider.is-vertical::after { + margin-left: 0; + margin-top: 10px; +} + +/* line 65, src/sass/app.sass */ +.divider.is-vertical::before { + margin-right: 0; + margin-bottom: 10px; +} + +/* line 72, src/sass/app.sass */ +.divider.is-white::after, .divider.is-white::before { + background-color: white; +} + +/* line 72, src/sass/app.sass */ +.divider.is-black::after, .divider.is-black::before { + background-color: #0a0a0a; +} + +/* line 72, src/sass/app.sass */ +.divider.is-light::after, .divider.is-light::before { + background-color: whitesmoke; +} + +/* line 72, src/sass/app.sass */ +.divider.is-dark::after, .divider.is-dark::before { + background-color: #363636; +} + +/* line 72, src/sass/app.sass */ +.divider.is-primary::after, .divider.is-primary::before { + background-color: #00d1b2; +} + +/* line 80, src/sass/app.sass */ +.divider.is-primary.is-light::after, .divider.is-primary.is-light::before { + background-color: #ebfffc; +} + +/* line 72, src/sass/app.sass */ +.divider.is-link::after, .divider.is-link::before { + background-color: #3273dc; +} + +/* line 80, src/sass/app.sass */ +.divider.is-link.is-light::after, .divider.is-link.is-light::before { + background-color: #eef3fc; +} + +/* line 72, src/sass/app.sass */ +.divider.is-info::after, .divider.is-info::before { + background-color: #3298dc; +} + +/* line 80, src/sass/app.sass */ +.divider.is-info.is-light::after, .divider.is-info.is-light::before { + background-color: #eef6fc; +} + +/* line 72, src/sass/app.sass */ +.divider.is-success::after, .divider.is-success::before { + background-color: #48c774; +} + +/* line 80, src/sass/app.sass */ +.divider.is-success.is-light::after, .divider.is-success.is-light::before { + background-color: #effaf3; +} + +/* line 72, src/sass/app.sass */ +.divider.is-warning::after, .divider.is-warning::before { + background-color: #ffdd57; +} + +/* line 80, src/sass/app.sass */ +.divider.is-warning.is-light::after, .divider.is-warning.is-light::before { + background-color: #fffbeb; +} + +/* line 72, src/sass/app.sass */ +.divider.is-danger::after, .divider.is-danger::before { + background-color: #f14668; +} + +/* line 80, src/sass/app.sass */ +.divider.is-danger.is-light::after, .divider.is-danger.is-light::before { + background-color: #feecf0; +} diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss index 202e02a..026f277 100644 --- a/src/site/assets/styles/style.scss +++ b/src/site/assets/styles/style.scss @@ -10,11 +10,16 @@ $family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Robot 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; $size-normal: 1rem; -@import '../../../node_modules/bulma/bulma.sass'; -@import '../../../node_modules/buefy/src/scss/buefy.scss'; +/* @import '../../../node_modules/bulma/bulma.sass'; +@import '../../../node_modules/buefy/src/scss/buefy.scss'; */ + +@import "~bulma"; +@import "~buefy/src/scss/buefy"; @import '@mdi/font/css/materialdesignicons.css'; +@import './bulma-divider.scss'; + html { // font-size: 100%; font-size: 14px; @@ -204,24 +209,6 @@ section#register a.is-text { margin-top: 5px; } -.input, -.taginput .taginput-container.is-focusable, -.textarea, -.select select { - border: 2px solid #21252d; - border-radius: 0.3em !important; - background: rgba(0, 0, 0, 0.15); - padding: 1rem; - color: $textColor; - height: 3rem; - &:focus, - &:hover { - border: 2px solid #21252d; - } - &::placeholder { - color: $textColor; - } -} /* button.button.is-primary { background-color: #323846; border: 2px solid #21252d; @@ -277,6 +264,29 @@ table.table { } } +.lolisafe-input input, +.lolisafe-select select, +.lolisafe-textarea textarea { + border: 2px solid #21252d; + border-radius: 0.3em !important; + background: rgba(0, 0, 0, 0.15); + padding: 1rem; + color: $textColor; + height: 3rem; + &:focus, + &:hover { + border: 2px solid #21252d; + } + &::placeholder { + color: $textColor; + } +} + +.lolisafe-input .icon { + color: #323846 !important; +} + + // vue-bar .vb > .vb-dragger { z-index: 5; @@ -345,3 +355,47 @@ table.table { height: 3rem; padding-right: 1rem; } + +.is-marginless { + margin: 0 !important; +} + +.fucking-opl-shut-up { + display: flex; + justify-content: center; + align-items: center; +} + +.lolisafe-on-border.field.is-floating-label .label:before { + background-color: $lolisafe; +} + +.is-lolisafe.divider::after, .is-lolisafe.divider::before { + background-color: #21252d; +} + +.lolisafe.taginput { + .taginput-container { + background-color: #21252d; + border: 2px solid #21252d; + border-radius: 0.3em !important; + + input { + background-color: #21252d; + color: $textColor; + &::placeholder { + color: $textColor; + } + } + + .icon { + padding-left: 15px; + } + + &:focus, + &:hover, + &:active { + border: 2px solid #21252d; + } + } +} diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue index 31ec8af..5d2f064 100644 --- a/src/site/pages/dashboard/account.vue +++ b/src/site/pages/dashboard/account.vue @@ -16,6 +16,7 @@ message="Nothing to do here" horizontal> <b-input + class="lolisafe-input" :value="user.username" expanded disabled /> @@ -27,6 +28,7 @@ horizontal> <b-input v-model="password" + class="lolisafe-input" type="password" expanded /> </b-field> @@ -37,6 +39,7 @@ horizontal> <b-input v-model="newPassword" + class="lolisafe-input" type="password" expanded /> </b-field> @@ -47,6 +50,7 @@ horizontal> <b-input v-model="reNewPassword" + class="lolisafe-input" type="password" expanded /> </b-field> @@ -65,6 +69,7 @@ horizontal> <b-field expanded> <b-input + class="lolisafe-input" :value="apiKey" expanded disabled /> diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue index 7f6a0fe..56331b5 100644 --- a/src/site/pages/dashboard/admin/settings.vue +++ b/src/site/pages/dashboard/admin/settings.vue @@ -17,6 +17,7 @@ horizontal> <b-input v-model="settings.serviceName" + class="lolisafe-input" expanded /> </b-field> @@ -26,6 +27,7 @@ horizontal> <b-input v-model="settings.uploadFolder" + class="lolisafe-input" expanded /> </b-field> @@ -35,6 +37,7 @@ horizontal> <b-input v-model="settings.linksPerAlbum" + class="lolisafe-input" type="number" expanded /> </b-field> @@ -45,6 +48,7 @@ horizontal> <b-input v-model="settings.maxUploadSize" + class="lolisafe-input" expanded /> </b-field> @@ -54,6 +58,7 @@ horizontal> <b-input v-model="settings.filenameLength" + class="lolisafe-input" expanded /> </b-field> @@ -63,6 +68,7 @@ horizontal> <b-input v-model="settings.albumLinkLength" + class="lolisafe-input" expanded /> </b-field> diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue index a909e75..a4aa440 100644 --- a/src/site/pages/dashboard/albums/_id.vue +++ b/src/site/pages/dashboard/albums/_id.vue @@ -14,7 +14,7 @@ <div class="level-left"> <div class="level-item"> <h1 class="title is-3"> - {{ images.name }} + {{ images.albumName }} </h1> </div> <div class="level-item"> @@ -27,6 +27,7 @@ <div class="level-item"> <b-field> <b-input + class="lolisafe-input" placeholder="Search" type="search" /> <p class="control"> diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue index a2ba522..c5acb2e 100644 --- a/src/site/pages/dashboard/albums/index.vue +++ b/src/site/pages/dashboard/albums/index.vue @@ -16,6 +16,7 @@ <b-field> <b-input v-model="newAlbumName" + class="lolisafe-input" placeholder="Album name..." type="text" @keyup.enter.native="createAlbum" /> diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue index 08c5166..d623b5c 100644 --- a/src/site/pages/dashboard/index.vue +++ b/src/site/pages/dashboard/index.vue @@ -1,7 +1,7 @@ <template> <section class="section is-fullheight dashboard"> <div class="container"> - <div class="columns is-variable is-0-mobile"> + <div class="columns "> <div class="column is-narrow"> <Sidebar /> </div> @@ -18,6 +18,7 @@ <div class="level-item"> <b-field> <b-input + class="lolisafe-input" placeholder="Search" type="search" /> <p class="control"> diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue index a9c5756..fe92087 100644 --- a/src/site/pages/dashboard/tags/index.vue +++ b/src/site/pages/dashboard/tags/index.vue @@ -140,6 +140,7 @@ <b-field> <b-input v-model="newTagName" + class="lolisafe-input" placeholder="Tag name..." type="text" @keyup.enter.native="createTag" /> diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue index 569e9d9..1f313e3 100644 --- a/src/site/pages/login.vue +++ b/src/site/pages/login.vue @@ -12,6 +12,7 @@ <b-field> <b-input v-model="username" + class="lolisafe-input" type="text" placeholder="Username" @keyup.enter.native="login" /> @@ -19,6 +20,7 @@ <b-field> <b-input v-model="password" + class="lolisafe-input" type="password" placeholder="Password" password-reveal diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue index 7cf4573..5a7a158 100644 --- a/src/site/pages/register.vue +++ b/src/site/pages/register.vue @@ -12,12 +12,14 @@ <b-field> <b-input v-model="username" + class="lolisafe-input" type="text" placeholder="Username" /> </b-field> <b-field> <b-input v-model="password" + class="lolisafe-input" type="password" placeholder="Password" password-reveal /> @@ -25,6 +27,7 @@ <b-field> <b-input v-model="rePassword" + class="lolisafe-input" type="password" placeholder="Re-type Password" password-reveal |